/* ==========================================================================
   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.

   The look is the hub's original one (production before plan 4.1), which
   the owner chose to keep on 2026-10-22: white and light-blue surfaces, the
   bright blue gradient on primary buttons, a dark slate sidebar, DM Sans
   type. The accent (primary buttons, links, the current page, focus) is
   that blue; red is only for destructive actions and danger (--danger).
   The --brand-* colors are the logo's, for the landing stage.

   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.
   Where an original color fell short, it moved the least it could to pass
   (noted beside it).
   ========================================================================== */

: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, the bright blue gradient ---------------- */
  /* White text stays at 4.5:1 or more across the whole gradient: its light
     end was #3b82f6 (3.7:1), now #3271e8, the nearest blue that passes. Red is
     kept for destructive actions (--danger), so a primary button never looks like one. */
  --action: #2563eb;
  --action-grad: linear-gradient(135deg, #3271e8 0%, #2563eb 55%, #1d4ed8 100%);
  --action-ink: #ffffff;
  --action-shadow: 0 8px 24px rgba(37, 99, 235, 0.28);
  /* A deeper blue for a mark on an --action fill (the current workspace's
     initial in the sidebar): white on it is 8.7:1, where the original
     translucent white square left its letter at 3.5:1. */
  --action-deep: #1e40af;

  /* --- Type: DM Sans throughout; titles in the same face, bold ----------- */
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font);
  --font-mono: "SFMono-Regular", ui-monospace, "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;

  /* White and light blue: the page a cool off-white, cards white. */
  --bg: #f6f8fc;
  --bg-subtle: #eef2f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --surface-raised: #ffffff;
  --overlay: rgba(11, 18, 32, 0.55);
  --scrim: rgba(11, 18, 32, 0.5);  /* behind the phone's sidebar drawer */
  --ink: #0b1220;
  --text: #0f172a;
  --text-muted: #475569;
  --text-faint: #5d708b;          /* was #94a3b8 (2.3-2.6:1): the same slate, dark enough for AA on every light surface */
  --text-placeholder: #5d708b;    /* placeholders read the same as captions */
  --text-on-dark: #e7edf7;
  --icon-faint: #94a3b8;          /* the original faint slate, for decoration only: dots, idle icons, hover borders */
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --border-soft: rgba(15, 23, 42, 0.06);

  /* Accent: the bright blue of the primary buttons. */
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-active: #1e40af;
  --accent-soft: #eff6ff;
  --accent-border: #bfdbfe;
  --accent-tint: rgba(37, 99, 235, 0.12);
  --accent-ring: rgba(37, 99, 235, 0.35);
  --accent-grad: linear-gradient(135deg, #3271e8 0%, #2563eb 55%, #1d4ed8 100%);  /* avatars, the sign-in panel */
  --link: #2563eb;
  --focus: #2563eb;              /* the accent: 3:1 or more on every surface (WCAG 1.4.11) */

  --success: #16a34a;
  --success-soft: #dcfce7;
  --success-border: #bbf7d0;
  --success-ink: #15803d;
  --warning: #d97706;
  --warning-soft: #fef3c7;
  --warning-border: #fde68a;
  --warning-ink: #b45309;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --danger-border: #fecaca;
  --danger-ink: #b91c1c;
  --info: #0ea5e9;
  --info-soft: #e0f2fe;
  --info-border: #bae6fd;
  --info-ink: #075985;
  /* Agent work in a chat: research and reports (indigo), missing data (amber). */
  --research-soft: #eef2ff;
  --research-border: #c7d2fe;
  --research-ink: #3730a3;

  /* The dark slate: sidebar, toasts, code blocks. Dark in both themes. */
  --stage: #0b1220;
  --stage-2: #111a2e;
  --stage-elev: #18223a;
  --stage-border: rgba(148, 163, 184, 0.16);
  --stage-text: #e7edf7;
  --stage-muted: #9fb0c9;
  /* 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: slate-tinted, soft; the accent's is blue. */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 24px 56px rgba(15, 23, 42, 0.18), 0 8px 20px rgba(15, 23, 42, 0.08);
  --shadow-accent: 0 8px 24px rgba(37, 99, 235, 0.28);
}

/* --- 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);
  --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);
}