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

/* ─── Design tokens ────────────────────────────────────────────── */
:root {
  /* Background layers */
  --bg-base:        #131110;
  --sidebar-bg:     #0f0e0c;
  --toolbar-bg:     #161412;
  --editor-bg:      #131110;
  --message-bg:     #1c1a17;
  --user-message-bg:#1e1c17;
  --input-bg:       #1c1a17;

  /* Borders */
  --border:         #2a2620;
  --hover-bg:       rgba(167,139,95,0.08);
  --active-bg:      rgba(167,139,95,0.12);

  /* Text */
  --text-primary:   #e8e0d0;
  --text-secondary: #b5a990;
  --text-muted:     #7a6f5e;

  /* Heading color in editor */
  --heading-color:  #d4b896;

  /* Accent (aged gold) */
  --accent:         #a78b5f;
  --accent-hover:   #c4a870;

  /* Typography */
  --font-serif:     'Georgia', 'Times New Roman', serif;
  --font-sans:      -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ─── Light mode token overrides (sepia) ──────────────────────── */
html.light {
  --bg-base:        #f2ead8;
  --sidebar-bg:     #e8dfc8;
  --toolbar-bg:     #ddd4bc;
  --editor-bg:      #f2ead8;
  --message-bg:     #e8dfc8;
  --user-message-bg:#ddd4bc;
  --input-bg:       #e8dfc8;

  --border:         #c4b89a;
  --hover-bg:       rgba(120,88,40,0.08);
  --active-bg:      rgba(120,88,40,0.15);

  --text-primary:   #241c0e;
  --text-secondary: #52401e;
  --text-muted:     #7a6640;

  --heading-color:  #3c2c0e;

  --accent:         #7a5c28;
  --accent-hover:   #9a7030;
}

/* ─── Base ─────────────────────────────────────────────────────── */
html, body, #root {
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* ─── Scrollbars ───────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}