/* Design tokens. Defined once here, referenced everywhere else through the custom-property function.
   Palette basis: the "Warm Desk" direction (docs/design-options/option-b-warm-desk.html).
   Two things the palette encodes, so later edits do not flatten them back out:
   - Surfaces are ordered by lightness in BOTH themes: --bg is the recessed plane, --surface-2 the
     hover/inset step, --surface the raised one. The thread sits on --surface so exactly one pane
     reads as the stage; the rail and list recede to --bg.
   - Radius is a language, not a decoration: --r-sm is chrome (buttons, inputs, chips), --r-md is
     containers, --r-lg belongs to speech bubbles only.
   Contrast (WCAG AA, at least 4.5:1, enforced by tests/public/contrast.test.js) in BOTH themes:
   - --text --muted --accent --warn --danger --ok --info on each of --bg --surface --surface-2 --bubble-out
     --bubble-in --accent-soft --neutral-soft;
   - --ok --danger --warn on their own -soft tint composited over --surface-2 (tinted chips);
   - --accent-ink on --accent, --on-danger on --danger, --bg on --text (toasts);
   - white on each --av-N avatar fill.
   The dark palette exists twice (media query and data-theme override): edit both blocks together. */
:root {
  color-scheme: light;

  /* color */
  --bg: #efe6d7;
  --surface: #fffdf8;
  --surface-2: #f6efe3;
  --line: #ded0b9;
  --text: #2c231b;
  --muted: #655a50;
  --accent: #8a5010;
  --accent-ink: #fffdf8;
  --accent-soft: #f2e2c6;
  --bubble-out: #ecdfc6;
  --bubble-in: #fffdf8;
  --danger: #9d352b;
  --on-danger: #fffdf8;
  --danger-soft: rgba(157, 53, 43, 0.12);
  --warn: #8a4209;
  --warn-soft: rgba(224, 165, 72, 0.18);
  --info: #1f5fbf;
  --ok: #285c3f;
  --ok-soft: rgba(40, 92, 63, 0.14);
  --neutral-soft: #e7ddcb;
  --focus: #1f5fbf;
  --shadow: 0 8px 28px rgba(44, 35, 27, 0.18);
  --lift: 0 1px 2px rgba(44, 35, 27, 0.06), 0 8px 24px rgba(44, 35, 27, 0.1);

  /* avatar backgrounds: white text is at least 4.5:1 on each, same in both themes */
  --av-0: #8a6420;
  --av-1: #2e6b4b;
  --av-2: #1f5fbf;
  --av-3: #a33b32;
  --av-4: #6b4c9a;
  --av-5: #0f766e;
  --av-6: #9a3f6b;
  --av-7: #4d5b6e;

  /* spacing, radius, type */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* A text serif for the customer's name only: the name is the human element in a queue of rows.
     System stack on purpose, no webfont — stylesheets here may not reference remote URLs. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;

  /* layout and layering */
  --nav-w: 60px;
  --rail-w: 200px;
  --list-w: 320px;
  --panel-w: 300px;
  --bar-h: 56px;
  --z-panel: 20;
  --z-rail: 25;
  --z-toast: 50;
  --ease: 160ms ease;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #16120e;
    --surface: #211b15;
    --surface-2: #1d1812;
    --line: #3a3026;
    --text: #f0e7d9;
    --muted: #b3a595;
    --accent: #dfa757;
    --accent-ink: #16120e;
    --accent-soft: #382c1a;
    --bubble-out: #3a2f1e;
    --bubble-in: #262019;
    --danger: #ef8b80;
    --on-danger: #16120e;
    --danger-soft: rgba(239, 139, 128, 0.16);
    --warn: #f0c46b;
    --warn-soft: rgba(240, 196, 107, 0.14);
    --info: #8fb7ff;
    --ok: #7ac89e;
    --ok-soft: rgba(122, 200, 158, 0.16);
    --neutral-soft: #2b241c;
    --focus: #8fb7ff;
    --shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    --lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #16120e;
  --surface: #211b15;
  --surface-2: #1d1812;
  --line: #3a3026;
  --text: #f0e7d9;
  --muted: #b3a595;
  --accent: #dfa757;
  --accent-ink: #16120e;
  --accent-soft: #382c1a;
  --bubble-out: #3a2f1e;
  --bubble-in: #262019;
  --danger: #ef8b80;
  --on-danger: #16120e;
  --danger-soft: rgba(239, 139, 128, 0.16);
  --warn: #f0c46b;
  --warn-soft: rgba(240, 196, 107, 0.14);
  --info: #8fb7ff;
  --ok: #7ac89e;
  --ok-soft: rgba(122, 200, 158, 0.16);
  --neutral-soft: #2b241c;
  --focus: #8fb7ff;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  --lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
}