/* ==========================================================================
   HunterViz design tokens: the one file every surface reads (plan 4.1).

   - The app (Cloud Run) loads it before hunterviz.css, through the shared
     head macro (app/core/templates/_head.html).
   - The marketing pages (static/*.html) link it before hunterviz.css.
   - The Admin console (admin-server/) serves an identical copy, at
     admin-server/static/assets/tokens.css; a test keeps the two the same.
   - Agent Reports run in a sandbox that can't load it, so report.py inlines
     the light values it uses; the same test holds them equal.
   - The landing stage (hv-stage.css) keeps its own literal copy of the brand
     colors, so its approved look can't move by accident; the test holds those
     equal too.

   Colors come from the logo (the red-orange H, the blue V) and the stage the
   owner approved for hunterviz.com: a near-black stage, a faint two-tone glow,
   paper-white slabs, Barlow type, upright buttons in sentence case. The
   accent (primary buttons, links, the current page, focus) is the logo's
   blue; red is only for destructive actions and danger (--danger).

   Light is the default. Dark applies when <html data-theme="dark">, which
   theme.js sets from the Account page's choice (light until every page has
   been checked in dark, plan 4.11). Every text color here meets WCAG AA
   (4.5:1) on every surface of its theme: tests/unit/core/test_design_tokens.py.
   ========================================================================== */

:root {
  /* --- Brand (both themes) ------------------------------------------------ */
  --brand-red: #d7261e;
  --brand-red-deep: #a8130f;
  --brand-orange: #ee5a24;
  --brand-orange-hot: #ff7a3d;
  --brand-blue: #1f73be;
  --brand-blue-deep: #12408e;
  --brand-blue-light: #3c9bdc;
  --brand-ice: #a9d8f7;
  --brand-space: #03050b;
  --brand-space-2: #070d1c;
  --brand-space-3: #0d1730;
  --brand-slab: #fdfcf9;
  --brand-slab-2: #f0eee8;
  /* The two-tone mark: orange then blue, like the logo (a straight bar, never slanted). */
  --brand-two-tone: linear-gradient(90deg, var(--brand-orange) 0 50%, var(--brand-blue-light) 50% 100%);

  /* --- Action: the primary button, in the logo's blue ---------------------- */
  /* White text stays at 4.5:1 or more across the whole gradient. Red is kept
     for destructive actions (--danger), so a primary button never looks like one. */
  --action: #1a64a8;
  --action-grad: linear-gradient(110deg, #1f73be 0%, #1a64a8 48%, #12408e 100%);
  --action-ink: #ffffff;
  --action-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 18px -10px rgba(18, 64, 142, 0.7);

  /* --- Type ------------------------------------------------------------- */
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Barlow Condensed", "Arial Narrow", "Barlow", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.8125rem;   /* 13 */
  --fs-md: 0.875rem;    /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.25rem;     /* 20 */
  --fs-2xl: 1.5rem;     /* 24 */
  --fs-3xl: 1.875rem;   /* 30 */
  --fs-display: clamp(2rem, 4.5vw, 3.25rem);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-base: 1.55;

  /* --- Space (4px steps) -------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;

  /* --- Radii -------------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* --- Layout and motion -------------------------------------------------- */
  --container: 1200px;
  --sidebar-w: 288px;
  --topbar-h: 64px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --z-header: 100;
  --z-dropdown: 500;
  --z-modal: 1000;
  --z-toast: 1500;

  /* --- Light theme (the default) ----------------------------------------- */
  color-scheme: light;

  /* Paper and ink: the landing's slab colors, warm and quiet. */
  --bg: #f3f1ec;
  --bg-subtle: #ece9e2;
  --surface: #fdfcf9;
  --surface-2: #f7f5f0;
  --surface-3: #ece9e2;
  --surface-raised: #ffffff;
  --overlay: rgba(7, 13, 28, 0.55);
  --ink: #14161c;
  --text: #14161c;
  --text-muted: #464b57;
  --text-faint: #5b606b;          /* AA on every light surface; use it for captions, not --icon-faint */
  --text-placeholder: #62666f;
  --text-on-dark: #e9eef7;
  --icon-faint: #8c909a;          /* decorative only: dots, idle icons, dividers' marks */
  --border: #e0dcd2;
  --border-strong: #c9c3b6;
  --border-soft: rgba(20, 22, 28, 0.06);

  /* Accent: the logo's blue, a shade deeper so links read at AA on paper. */
  --accent: #1a64a8;
  --accent-hover: #12408e;
  --accent-active: #12408e;
  --accent-soft: #e6eff8;
  --accent-border: #bcd5ee;
  --accent-tint: rgba(31, 115, 190, 0.12);
  --accent-ring: rgba(60, 155, 220, 0.55);
  --accent-grad: linear-gradient(135deg, #1f73be 0%, #1a64a8 55%, #12408e 100%);
  --link: #1a64a8;
  --focus: #1a64a8;              /* the accent: 3:1 or more on every surface (WCAG 1.4.11) */

  --success: #1f8a4c;
  --success-soft: #e5f3e9;
  --success-border: #b9dec5;
  --success-ink: #166534;
  --warning: #d97706;
  --warning-soft: #fcf1d9;
  --warning-border: #efd28c;
  --warning-ink: #8a4b00;
  --danger: #c0182f;
  --danger-soft: #fdeced;
  --danger-border: #f4c2c8;
  --danger-ink: #a3142a;
  --info: #1f73be;
  --info-soft: #e6eff8;
  --info-border: #bcd5ee;
  --info-ink: #174a80;
  /* Agent work in a chat: research and reports (violet), missing data (amber). */
  --research-soft: #efedfb;
  --research-border: #cfc9f2;
  --research-ink: #4636a8;

  /* The dark stage: sidebar, voice mode, code blocks. Dark in both themes. */
  --stage: #070d1c;
  --stage-2: #0d1730;
  --stage-elev: #16223d;
  --stage-border: rgba(150, 180, 225, 0.16);
  --stage-text: #e9eef7;
  --stage-muted: #a9b5ca;
  /* Older names for the stage, still read by some templates. */
  --dark: var(--stage);
  --dark-2: var(--stage-2);
  --dark-elev: var(--stage-elev);
  --dark-border: var(--stage-border);
  --dark-text: var(--stage-text);
  --dark-muted: var(--stage-muted);

  /* Elevation: ink-tinted, soft. */
  --shadow-xs: 0 1px 2px rgba(20, 22, 28, 0.06);
  --shadow-sm: 0 1px 3px rgba(20, 22, 28, 0.08), 0 1px 2px rgba(20, 22, 28, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 22, 28, 0.08), 0 2px 4px rgba(20, 22, 28, 0.04);
  --shadow-lg: 0 12px 28px rgba(20, 22, 28, 0.12), 0 4px 10px rgba(20, 22, 28, 0.05);
  --shadow-xl: 0 24px 56px rgba(20, 22, 28, 0.18), 0 8px 20px rgba(20, 22, 28, 0.08);
  --shadow-accent: 0 8px 22px -10px rgba(18, 64, 142, 0.55);
}

/* --- Dark theme (opt-in on the Account page) ------------------------------ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #070b14;
  --bg-subtle: #0d1422;
  --surface: #0d1422;
  --surface-2: #121b2d;
  --surface-3: #19243a;
  --surface-raised: #121b2d;
  --overlay: rgba(2, 4, 9, 0.72);
  --ink: #02040a;
  --text: #e9eef7;
  --text-muted: #b9c4d8;
  --text-faint: #95a2b9;
  --text-placeholder: #8d9ab2;
  --icon-faint: #5f6c84;
  --border: #223049;
  --border-strong: #33435f;
  --border-soft: rgba(150, 180, 225, 0.1);

  --accent: #6fb6ea;
  --accent-hover: #9fd0f4;
  --accent-active: #9fd0f4;
  --accent-soft: #10263d;
  --accent-border: #1f4a6c;
  --accent-tint: rgba(60, 155, 220, 0.16);
  --accent-ring: rgba(111, 182, 234, 0.55);
  --accent-grad: linear-gradient(135deg, #1f73be 0%, #1a64a8 55%, #12408e 100%);
  --link: #6fb6ea;
  --focus: #6fb6ea;

  --success: #34c27a;
  --success-soft: #0f2a1f;
  --success-border: #1e5a3e;
  --success-ink: #86efac;
  --warning: #f2a93b;
  --warning-soft: #2e2410;
  --warning-border: #5f4a1c;
  --warning-ink: #fcd34d;
  --danger: #cc2d47;
  --danger-soft: #33151b;
  --danger-border: #6a2a35;
  --danger-ink: #fca5b0;
  --info: #3c9bdc;
  --info-soft: #0e2638;
  --info-border: #1f4a6c;
  --info-ink: #9fd0f4;
  --research-soft: #1d1a3a;
  --research-border: #3d3770;
  --research-ink: #c4bcf8;

  --stage: #04070e;
  --stage-2: #0a1222;
  --stage-elev: #142038;
  --stage-border: rgba(150, 180, 225, 0.14);
  --stage-text: #e9eef7;
  --stage-muted: #a9b5ca;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.65), 0 8px 20px rgba(0, 0, 0, 0.4);
  --shadow-accent: 0 8px 22px -10px rgba(0, 0, 0, 0.7);
}