/* memoria · base styles & theme variables (day defaults; JS theme config overrides) */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* palette — day theme defaults (overridden at runtime by src/themes/*.js) */
  --bg: #f5f0e6;
  --surface: #fdfbf5;
  --surface-2: #f8f4ea;
  --text: #4a443c;
  --text-2: #8a8175;
  --accent: #9fb08a;
  --accent-deep: #8ba378;
  --bubble-user: #dfe7d2;
  --bubble-peer: #fdfbf5;
  --brown: #b8a68a;
  --line: rgba(74, 68, 60, 0.12);
  --shadow: 0 4px 16px rgba(74, 68, 60, 0.08);
  --outer-bg: #e7e0cf;
  --chat-bg: linear-gradient(165deg, #f8f4ea 0%, #f2ecdf 55%, #ece4d2 100%);
  --tabbar-bg: rgba(253, 251, 245, 0.94);

  --font-display: "Noto Serif SC", "Songti SC", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, "Courier New", monospace;

  --radius-card: 14px;
  --radius-bubble: 18px;
}

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--outer-bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.6;
}

/* mobile shell, centered on desktop */
#shell {
  max-width: 430px;
  margin: 0 auto;
  height: 100dvh;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 48px rgba(40, 32, 24, 0.18);
}

#app { height: 100%; }

.page {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font-family: inherit; color: var(--text); }

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 600; }

::-webkit-scrollbar { width: 0; height: 0; }