/* ============================================================
   DESIGN TOKENS
   ------------------------------------------------------------
   Every value a component needs comes from here. Two rules keep this file
   honest, and tests/css-contract.test.js enforces both:

     1. A token that is referenced with var() MUST be declared in :root AND
        have a dark-theme value. A missing token makes the whole declaration
        invalid at computed-value time, so the property silently does nothing
        (that is how the chat bubbles lost their shadows and how a status
        colour ended up undefined).
     2. Components never hard-code a colour, radius, duration or shadow.

   Contrast: --text-muted is the lightest text token that meets WCAG AA
   (4.5:1) on every surface (5.2:1 on --bg). --text-subtle is for decorative
   text only (uppercase section labels, tiny meta, icons) and is never used
   for body copy.
   ============================================================ */
:root {
  /* Surfaces */
  --bg: #f7f5f0; --bg-surface: #fff; --bg-elevated: #fcfaf6;
  --bg-muted: #efece5; --bg-hover: #f0ede6;
  /* Text. --text-muted: 5.2:1 on --bg. --text-subtle: 3.4:1, decorative only. */
  --text: #1f1d1a; --text-muted: #6b665e; --text-subtle: #8a8478;
  /* Borders */
  --border: #e8e4dc; --border-strong: #d4cfc3;
  /* Accent */
  --accent: #0d7377; --accent-hover: #0a5c5f; --accent-subtle: #e6f3f3;
  --accent-contrast: #fff;
  /* Semantic */
  --success: #10b981; --success-subtle: #d1fae5; --success-strong: #047857;
  --warning: #f59e0b; --warning-subtle: #fef3c7; --warning-strong: #b45309;
  --danger: #dc2626; --danger-subtle: #fee2e2;
  --info: #0ea5e9; --info-subtle: #e0f2fe;
  /* Elevation */
  --shadow: 0 2px 8px rgba(31,29,26,0.06);
  --shadow-sm: 0 1px 2px rgba(31,29,26,0.06), 0 1px 3px rgba(31,29,26,0.05);
  --shadow-md: 0 2px 8px rgba(31,29,26,0.08), 0 1px 3px rgba(31,29,26,0.06);
  --shadow-lg: 0 12px 28px rgba(31,29,26,0.16), 0 2px 6px rgba(31,29,26,0.08);
  /* Radii */
  --radius-xs: 4px; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px;
  --radius-pill: 999px;
  /* Spacing scale (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  /* Type scale */
  --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px;
  --text-lg: 16px; --text-xl: 20px; --text-2xl: 28px;
  /* Motion */
  --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 260ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  /* Interaction sizes */
  --hit: 32px;          /* pointer target on a mouse-driven device */
  --hit-touch: 44px;    /* pointer target on a touch device (see @media below) */
  --tile-img: 104px;    /* stable image slot for a result tile */
  /* Fonts + shell */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Consolas, monospace;
  --sidebar-width: 260px;
  /* Height of the phone bottom bar. Declared here because the bar, the chat
     composer, the storage banner and the main scroll area all offset by it, and
     one token is what keeps them in step. */
  --bottom-nav-h: 56px;
}
[data-theme="dark"] {
  --bg: #181614; --bg-surface: #221f1c; --bg-elevated: #2a2622;
  --bg-muted: #2e2a26; --bg-hover: #332e2a;
  --text: #eeeae2; --text-muted: #a8a39a; --text-subtle: #8a847a;
  --border: #3a3530; --border-strong: #4a443e;
  --accent: #2dd4bf; --accent-hover: #5eead4; --accent-subtle: #1f3a3a;
  --accent-contrast: #10201f;
  --success: #34d399; --success-subtle: #1a3a2e; --success-strong: #6ee7b7;
  --warning: #fbbf24; --warning-subtle: #3a3320; --warning-strong: #fcd34d;
  --danger: #f87171; --danger-subtle: #3a2020;
  --info: #38bdf8; --info-subtle: #12303f;
  --shadow: 0 2px 8px rgba(0,0,0,0.5);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.45);
}
/* Touch devices get a larger target without changing the desktop density. */
@media (pointer: coarse) {
  :root { --hit: var(--hit-touch); }
}
/* Motion is a preference, not a decoration: honour it globally. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: var(--font); background: var(--bg); color: var(--text);
line-height: 1.5; font-size: 14px; overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3 { font-weight: 600; line-height: 1.3; }