/* ============================================================================
   tokens.css — Geotoolbox canonical design tokens · v1 · SG_TOKENS_V1 (2026-07-12)
   ============================================================================
   PURPOSE
   One canonical token sheet consolidating the live token vocabulary from
   style.css (E1 "Analytics Dashboard") + theme-override.css (E2 teal rebrand),
   plus the primitives the 2026-07-07 design-system audit flagged as missing
   (slate neutral ramp, AI/indigo semantics, link-drift token, text/border
   semantics).

   LOAD ORDER (safety contract)
   Load this file FIRST, before style.css and theme-override.css:
     <link rel="stylesheet" href="assets.php?file=tokens.css&v=...">   <- first
     <link rel="stylesheet" href="assets.php?file=style.css&v=...">
     <link rel="stylesheet" href="assets.php?file=theme-override.css&v=...">
   Every token that ALREADY exists in style.css/theme-override.css is repeated
   here with its LIVE post-cascade value (theme-override wins today), so this
   file is purely additive: later files re-declare and win, and the winning
   value is identical. Net pixel change from loading this file alone: zero.
   Where style.css and theme-override.css disagree (e.g. --color-primary,
   --color-accent, --radius-md), the value below is the LIVE winner
   (theme-override.css), noted inline.

   DARK MODE
   The app themes via html[data-theme="dark"] (attribute, not media query), so
   the dark block below uses :root[data-theme="dark"] only — a
   prefers-color-scheme block would desync these tokens from the app shell.
   Only tokens INTRODUCED by this file flip here. Dark values for pre-existing
   token names (--surface-card, --color-success-bg, ...) remain owned by
   theme-override.css's dark block to avoid changing today's dark rendering.
   ========================================================================== */

:root {

  /* ==========================================================================
     1. COLOR PRIMITIVES — raw ramps (never flip in dark; reference via the
        semantic tokens in section 2 whenever a semantic role exists)
     ========================================================================== */

  /* --- Neutral: gray (Tailwind gray) — E1 legacy ramp, kept verbatim from
         style.css:90-99. Blue-less neutral; used by older surfaces. --- */
  --gray-50:  #f9fafb;  /* lightest gray fill */
  --gray-100: #f3f4f6;  /* subtle gray fill */
  --gray-200: #e5e7eb;  /* default card/table border (E1 pages) */
  --gray-300: #d1d5db;  /* strong border / disabled control */
  --gray-400: #9ca3af;  /* placeholder text */
  --gray-500: #6b7280;  /* muted text (E1 pages) */
  --gray-600: #4b5563;  /* secondary text (E1 pages) */
  --gray-700: #374151;  /* body text (E1 pages) */
  --gray-800: #1f2937;  /* heading text (E1 pages) */
  --gray-900: #111827;  /* near-black text (E1 pages) */

  /* --- Neutral: slate (Tailwind slate) — the de-facto neutral of every E3+
         page (tracker, media-impact, offsite-citations, action-queue...).
         NEW as tokens; values already ubiquitous as hex. --- */
  --slate-50:  #f8fafc;  /* page background / hover fill / table header fill */
  --slate-100: #f1f5f9;  /* subtle fill, row dividers (= --surface-subtle) */
  --slate-200: #e2e8f0;  /* soft border, chip border */
  --slate-300: #cbd5e1;  /* input border, placeholder dashes */
  --slate-400: #94a3b8;  /* faint text, meta text */
  --slate-500: #64748b;  /* muted text, labels, table headers */
  --slate-600: #475569;  /* tertiary body text */
  --slate-700: #334155;  /* secondary text, section heads */
  --slate-800: #1e293b;  /* dark-mode raised surface */
  --slate-900: #0f172a;  /* primary text / dark-mode page bg */

  /* --- Brand: teal ramp (marketing-site brand; DO NOT change) --- */
  --teal-50:  #f0fdfa;  /* brand tint background (= --color-accent-light) */
  --teal-200: #99f6e4;  /* brand tint border / highlight ring */
  --teal-600: #0d9488;  /* THE brand teal (= --color-accent / --geo-primary) */
  --teal-700: #0f766e;  /* AA-safe teal for white-text buttons (= accent-strong) */
  --teal-800: #115e59;  /* darkest brand teal (= --color-primary) */

  /* --- Cyan — mi/oci link-drift hue (audit §1.5) + decorative bars/tints --- */
  --cyan-50:  #ecfeff;  /* cyan tint background (info banners, URL-level chips) */
  --cyan-200: #a5f3fc;  /* cyan tint border */
  --cyan-400: #22d3ee;  /* decorative gradient top (trend bars); dark-mode link */
  --cyan-700: #0e7490;  /* cyan text/links on mi/oci pages (= --color-link) */
  --cyan-800: #155e75;  /* strong cyan text (banner <b>) */

  /* --- Indigo — the unofficial "AI/citation semantics" accent (audit §1.5);
         canonicalized below as --color-ai-*  --- */
  --indigo-50:  #eef2ff;  /* indigo tint background (AI chips, upsell gradient) */
  --indigo-200: #c7d2fe;  /* indigo tint border */
  --indigo-600: #4f46e5;  /* indigo CTA background */
  --indigo-700: #4338ca;  /* indigo CTA hover */
  --indigo-800: #3730a3;  /* indigo chip/emphasis text */
  --indigo-900: #312e81;  /* deepest indigo emphasis text */

  /* --- Status ramps (chip tints used across E3 pages) --- */
  --emerald-50:  #ecfdf5;  /* positive tint bg (= --color-success-bg) */
  --emerald-200: #a7f3d0;  /* positive chip border */
  --emerald-600: #059669;  /* positive base (= --color-success) */
  --emerald-700: #047857;  /* positive chip text */
  --green-200:   #bbf7d0;  /* success border (= --color-success-border) */
  --green-700:   #15803d;  /* success strong text (= --color-success-strong) */
  --red-50:      #fef2f2;  /* negative tint bg (= --color-danger-bg) */
  --red-200:     #fecaca;  /* negative border (= --color-danger-border) */
  --red-600:     #dc2626;  /* negative base (= --color-danger) */
  --red-700:     #b91c1c;  /* negative chip text */
  --red-800:     #991b1b;  /* negative strong text (= --color-danger-strong) */
  --amber-50:    #fffbeb;  /* caution tint bg (= --color-warning-bg) */
  --amber-200:   #fde68a;  /* caution border (= --color-warning-border) */
  --amber-600:   #d97706;  /* caution base (= --color-warning) */
  --amber-700:   #b45309;  /* caution emphasis text (AI-crawl badges) */
  --amber-800:   #92400e;  /* caution strong text (= --color-warning-strong) */
  --orange-50:   #fff7ed;  /* "no / absent" chip bg */
  --orange-200:  #fed7aa;  /* "no / absent" chip border */
  --orange-800:  #9a3412;  /* "no / absent" chip text, gap emphasis */
  --sky-200:     #bae6fd;  /* info border (= --color-info-border) */

  /* ==========================================================================
     2. SEMANTIC COLOR TOKENS — use these in components
     ========================================================================== */

  /* --- Brand / accent (values = live theme-override.css winners) --- */
  --color-primary:             #115e59;  /* primary brand teal (LIVE winner; style.css's #1E3A8A is overridden) */
  --color-primary-light:       #0f766e;  /* primary hover */
  --color-accent:              #0d9488;  /* THE brand accent — links, active states */
  --color-accent-hover:        #0f766e;  /* accent hover */
  --color-accent-light:        #f0fdfa;  /* accent tint background */
  --color-accent-strong:       #0f766e;  /* button bg — white text hits WCAG AA 4.5:1 */
  --color-accent-strong-hover: #115e59;  /* strong button hover */
  --geo-primary:               #0d9488;  /* legacy alias (tabs, links, badges) — prefer --color-accent */
  --color-on-accent:           #ffffff;  /* NEW: text/icon color on accent/AI/strong buttons */

  /* --- Status: success --- */
  --color-success:        #059669;  /* success base (icons, text on light) */
  --color-success-bg:     #ecfdf5;  /* success tint background */
  --color-success-border: #bbf7d0;  /* success border */
  --color-success-strong: #15803d;  /* success text on tint (AA on -bg) */

  /* --- Status: warning --- */
  --color-warning:        #d97706;  /* warning base */
  --color-warning-bg:     #fffbeb;  /* warning tint background */
  --color-warning-border: #fde68a;  /* warning border */
  --color-warning-strong: #92400e;  /* warning text on tint (AA on -bg) */

  /* --- Status: danger --- */
  --color-danger:         #dc2626;  /* danger base */
  --color-danger-bg:      #fef2f2;  /* danger tint background */
  --color-danger-border:  #fecaca;  /* danger border */
  --color-danger-strong:  #991b1b;  /* danger text on tint (AA on -bg) */

  /* --- Status: info (teal-aligned per E2; values = live winners) --- */
  --color-info:        #0f766e;  /* info base (LIVE winner; style.css's #1E40AF is overridden) */
  --color-info-bg:     #f0fdfa;  /* info tint background (LIVE winner) */
  --color-info-border: #bae6fd;  /* info border */
  --color-info-strong: #115e59;  /* NEW: info text on tint — completes the base/bg/border/strong set */

  /* --- AI / citation semantics (NEW — audit §1.5: indigo was 15 scattered
         hexes meaning "AI said this"; now one named family) --- */
  --color-ai:        #4f46e5;  /* AI-semantic CTA/button background */
  --color-ai-hover:  #4338ca;  /* AI CTA hover */
  --color-ai-strong: #3730a3;  /* AI chip/emphasis text (on --color-ai-bg) */
  --color-ai-bg:     #eef2ff;  /* AI chip tint background */
  --color-ai-border: #c7d2fe;  /* AI chip border */

  /* --- Link drift (NEW — mi/oci pages link in cyan-700, not brand teal.
         Tokenized as-is to keep pixels identical; converging this to
         --color-accent later is a ONE-LINE change here. Audit §1.5. --- */
  --color-link: #0e7490;  /* interactive text/links on mi/oci pages (cyan drift) */

  /* --- Surfaces --- */
  --surface-card:         #ffffff;  /* card background (E2 Phase-2 token; dark flip owned by theme-override) */
  --surface-raised:       #ffffff;  /* NEW: card/table/input bg with GUARANTEED dark flip (tokens.css owns it) */
  --surface-subtle:       #f1f5f9;  /* subtle panel fill (E2 Phase-2 token) */
  --surface-page:         #f8fafc;  /* NEW: page/body background (style.css:157 hardcodes this hex) */
  --surface-hover:        #f8fafc;  /* NEW: row hover / table-header / disabled-control fill (flips) */
  --surface-warm:         #fdfbf4;  /* warm panel tint (existing) */
  --surface-warm-border:  #e7e2d3;  /* warm panel border (existing) */
  --surface-cool:         #f5f8fc;  /* cool panel tint (existing) */
  --surface-cool-border:  #dce4ee;  /* cool panel border (existing) */
  --surface-peach:        #fdf8f3;  /* peach panel tint (existing) */
  --surface-peach-border: #ebe0d1;  /* peach panel border (existing) */

  /* --- Text (NEW semantic set; slate-based, matches E3+ pages) --- */
  --text-primary:   #0f172a;  /* headings, key figures (slate-900) */
  --text-secondary: #334155;  /* section heads, control text (slate-700) */
  --text-tertiary:  #475569;  /* body/meta text (slate-600) */
  --text-muted:     #64748b;  /* labels, captions, table headers (slate-500) */
  --text-faint:     #94a3b8;  /* de-emphasized meta, URLs, footnotes (slate-400) */

  /* --- Borders (NEW semantic set) --- */
  --border-strong: #cbd5e1;  /* form controls, emphasized outlines (slate-300) */
  --border-soft:   #e2e8f0;  /* pills, secondary panels (slate-200) */
  --border-card:   #e5e7eb;  /* card + table outlines (gray-200 — E3 pages use gray here) */
  --border-subtle: #f1f5f9;  /* row dividers, hairlines (slate-100) */

  /* ==========================================================================
     3. SPACING — 4px base, linear (NEW scale; legacy --sp-1..16 in style.css
        stays valid, migrate opportunistically)
     ========================================================================== */
  --space-1: 4px;   /* tight gaps inside chips/controls */
  --space-2: 8px;   /* icon-text gaps, small padding */
  --space-3: 12px;  /* control padding, grid gaps */
  --space-4: 16px;  /* card padding, standard gap */
  --space-5: 20px;  /* section inner padding */
  --space-6: 24px;  /* block spacing */
  --space-7: 28px;  /* large block spacing */
  --space-8: 32px;  /* section spacing */

  /* ==========================================================================
     4. RADIUS (values = live theme-override winners; style.css's 6/8/12 are
        overridden to 8/10/14 today)
     ========================================================================== */
  --radius-sm:   4px;     /* small controls, tags */
  --radius-md:   8px;     /* buttons, inputs (LIVE winner) */
  --radius-lg:   10px;    /* cards, tables (LIVE winner) */
  --radius-xl:   14px;    /* hero cards, modals (LIVE winner) */
  --radius-full: 9999px;  /* pills, chips, avatars */

  /* ==========================================================================
     5. SHADOW (verbatim from style.css:143-145)
     ========================================================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 5px rgba(0, 0, 0, 0.02);   /* inputs, chips */
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);  /* cards */
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06); /* popovers, modals */

  /* ==========================================================================
     6. TYPOGRAPHY (stacks = live theme-override winners; scale/weights/leading
        verbatim from style.css:105-121)
     ========================================================================== */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;  /* UI text (LIVE winner) */
  --font-mono: 'DM Mono', 'Fira Code', 'Consolas', monospace;                                  /* code, URLs, tabular */

  --text-xs:   0.75rem;    /* 12px — chips, footnotes */
  --text-sm:   0.8125rem;  /* 13px — table body, captions */
  --text-base: 0.875rem;   /* 14px — default body */
  --text-md:   1rem;       /* 16px — emphasized body */
  --text-lg:   1.125rem;   /* 18px — card titles */
  --text-xl:   1.25rem;    /* 20px — section titles */
  --text-2xl:  1.5rem;     /* 24px — page titles */
  --text-3xl:  1.875rem;   /* 30px — hero figures */

  --weight-normal:   400;  /* body */
  --weight-medium:   500;  /* labels */
  --weight-semibold: 600;  /* buttons, chips */
  --weight-bold:     700;  /* headings, key figures */

  --leading-tight:   1.25;   /* headings */
  --leading-normal:  1.5;    /* body */
  --leading-relaxed: 1.625;  /* long-form copy */
}

/* ============================================================================
   DARK MODE — attribute-driven to match the app shell (html[data-theme=dark]).
   ONLY tokens introduced by tokens.css flip here; pre-existing names
   (--surface-card, --surface-subtle, --color-*-bg, ...) keep their dark
   behavior in theme-override.css so today's dark rendering is untouched.
   Brand teal (--color-accent* ) intentionally does not flip: #0d9488/#0f766e
   stay readable on slate-900/800 surfaces (≥4.5:1 vs #0f172a).
   ========================================================================== */
:root[data-theme="dark"] {
  /* Surfaces */
  --surface-raised: #1e293b;  /* cards/tables/inputs on dark (slate-800) */
  --surface-page:   #0f172a;  /* page background on dark (slate-900) */
  --surface-hover:  #334155;  /* row hover / header fill on dark (slate-700) */

  /* Text */
  --text-primary:   #f8fafc;  /* headings on dark */
  --text-secondary: #cbd5e1;  /* section heads on dark */
  --text-tertiary:  #a6b6c9;  /* body/meta on dark (between slate-300/400) */
  --text-muted:     #94a3b8;  /* labels/captions on dark */
  --text-faint:     #64748b;  /* de-emphasized meta on dark */

  /* Borders */
  --border-strong:  #475569;  /* form controls on dark */
  --border-soft:    #334155;  /* pills/panels on dark */
  --border-card:    #334155;  /* card/table outlines on dark */
  --border-subtle:  #1e293b;  /* row dividers on dark */

  /* Link drift — cyan-700 is illegible on slate-900; lift to cyan-400 */
  --color-link: #22d3ee;

  /* AI chip family — flip tint/text pair together (CTA --color-ai stays
     indigo-600: white-on-indigo-600 passes AA on any surface) */
  --color-ai-bg:     #312e81;  /* AI chip tint on dark (indigo-900) */
  --color-ai-border: #4338ca;  /* AI chip border on dark (indigo-700) */
  --color-ai-strong: #c7d2fe;  /* AI chip text on dark (indigo-200) */
}