/*
 * Design tokens. Every color/type/space/radius/shadow/motion value the app uses
 * should come from here — see docs/DESIGN_SYSTEM.md for the full catalogue and
 * design-system.html for a live rendering of every token + component.
 */

:root {
  /* Color — neutrals */
  --bg: #f6f4ef;
  --surface: #ffffff;
  --surface-2: #f0ede6;
  --ink: #1d2321;
  --ink-muted: #55605b;
  --line: #dcd7cc;

  /* Color — brand */
  --brand: #1f6f5c;
  --brand-ink: #ffffff;
  --brand-soft: #dcefe8;

  /* Color — semantic */
  --ok: #1f7a4d;
  --ok-soft: #e1f3e8;
  --bad: #b4372f;
  --bad-soft: #fbe5e2;
  --warn: #8f5a00; /* darkened from #a86a00: that shade only hit 3.97:1 on --warn-soft, below AA's 4.5:1 */
  --warn-soft: #fdf1d8;
  --info: #1f5f8f;
  --info-soft: #dcebf7;

  /* Typography */
  --font-ui: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px; /* reserved: not yet used by any screen */
  --leading-base: 1.55;

  /* Spacing (4-based). Governs layout rhythm — gaps between cards/sections/fields.
     Tight intra-component padding (button/chip/input) is defined per-component
     and may deviate slightly for optical balance; see DESIGN_SYSTEM.md. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.05);

  /* Z-index layers */
  --z-dropdown: 10;
  --z-modal: 100;
  --z-toast: 200;

  /* Motion */
  --duration-fast: 0.15s;
  --duration-base: 0.25s;

  /* Breakpoints (documentation only — @media queries below use the literal px) */
  --bp-sm: 360px;
  --bp-md: 640px;
  --bp-lg: 960px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141816;
    --surface: #1c211f;
    --surface-2: #242a27;
    --ink: #e8ece9;
    --ink-muted: #9fa9a4;
    --line: #333b37;
    --brand: #5cc4a6;
    --brand-ink: #0d1f19;
    --brand-soft: #1f3a32;
    --ok: #5fd394;
    --ok-soft: #1b3326;
    --bad: #f08a80;
    --bad-soft: #3a1f1c;
    --warn: #f0bf5a;
    --warn-soft: #3a2f17;
    --info: #7cb8ec;
    --info-soft: #1c2f3d;
    --shadow-1: none;
  }
}

/* Manual theme override (used by design-system.html's theme toggle). The app
   itself has no in-UI theme switch yet — these selectors exist so a future one
   is a drop-in, not a redesign. */
:root[data-theme="dark"] {
  --bg: #141816;
  --surface: #1c211f;
  --surface-2: #242a27;
  --ink: #e8ece9;
  --ink-muted: #9fa9a4;
  --line: #333b37;
  --brand: #5cc4a6;
  --brand-ink: #0d1f19;
  --brand-soft: #1f3a32;
  --ok: #5fd394;
  --ok-soft: #1b3326;
  --bad: #f08a80;
  --bad-soft: #3a1f1c;
  --warn: #f0bf5a;
  --warn-soft: #3a2f17;
  --info: #7cb8ec;
  --info-soft: #1c2f3d;
  --shadow-1: none;
}
:root[data-theme="light"] {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --surface-2: #f0ede6;
  --ink: #1d2321;
  --ink-muted: #55605b;
  --line: #dcd7cc;
  --brand: #1f6f5c;
  --brand-ink: #ffffff;
  --brand-soft: #dcefe8;
  --ok: #1f7a4d;
  --ok-soft: #e1f3e8;
  --bad: #b4372f;
  --bad-soft: #fbe5e2;
  --warn: #8f5a00;
  --warn-soft: #fdf1d8;
  --info: #1f5f8f;
  --info-soft: #dcebf7;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.05);
}