/* app/assets/stylesheets/base/tokens.css
   ─────────────────────────────────────────────────────────────────────────────
   Single source of truth for every visual decision.
   All other CSS files reference these variables exclusively.

   The app is dark. There is no light theme: the semantic aliases below resolve
   to dark surfaces and light ink, and every component reads the alias, never a
   raw palette entry, so the decision lives here alone.
   ───────────────────────────────────────────────────────────────────────────── */

:root {

  /* Tells the browser to render its own chrome — scrollbars, form controls,
     spinners, autofill — against a dark page. */
  color-scheme: dark;

  /* ── Colour palette ──────────────────────────────────────────────────────── */

  /* Ink ramp — the surface stack, deepest first. Warm-neutral to match greys. */
  --color-ink-950:    #0a0a0a;   /* chrome: masthead, hero, footer */
  --color-ink-900:    #121211;   /* page */
  --color-ink-800:    #171715;   /* sunken */
  --color-ink-700:    #1d1d1b;   /* surface: cards, panels, inputs */
  --color-ink-600:    #262623;   /* raised: hover, zebra stripes */
  --color-ink-500:    #33332f;   /* hairline borders */
  --color-ink-400:    #45453f;   /* emphasised borders */

  /* Neutrals — ink for text and marks sitting on the ramp above */
  --color-white:      #fafafa;
  --color-gray-100:   #f3f3f0;
  --color-gray-300:   #d1d0cb;
  --color-gray-400:   #a8a7a2;
  --color-gray-500:   #737370;
  --color-gray-700:   #3d3d3b;

  /* Blue — titles, links, highlights, primary actions */
  --color-blue-100:   #dbeafe;
  --color-blue-200:   #bfdbfe;
  --color-blue-300:   #93c5fd;
  --color-blue-500:   #3b82f6;
  --color-blue-600:   #1a4fd6;
  --color-blue-700:   #1d4ed8;
  --color-blue-900:   #1e3a8a;

  /* Semantic — sentiment, risk, status.
     The 400s read as text on dark; the 600s stay as solid fills. Soft fills
     come from the tints below, not from a light 100-step. */
  --color-green-400:  #4ade80;
  --color-green-600:  #16a34a;

  --color-amber-400:  #fbbf24;
  --color-amber-500:  #d97706;

  --color-red-400:    #f87171;
  --color-red-600:    #c0392b;
  --color-red-700:    #b91c1c;

  /* ── Semantic aliases ────────────────────────────────────────────────────── */

  --bg-chrome:        var(--color-ink-950);
  --bg-page:          var(--color-ink-900);
  --bg-sunken:        var(--color-ink-800);
  --bg-surface:       var(--color-ink-700);
  --bg-raised:        var(--color-ink-600);

  --border-color:     var(--color-ink-500);
  --border-strong:    var(--color-ink-400);

  --text-primary:     var(--color-gray-100);
  --text-secondary:   var(--color-gray-300);
  --text-muted:       var(--color-gray-400);
  --text-inverse:     var(--color-ink-950);

  --link-color:       var(--color-blue-300);
  --link-hover:       var(--color-blue-100);

  --accent-color:     var(--color-blue-500);
  --accent-light:     rgba(59, 130, 246, 0.16);

  /* Status text — for figures and labels that carry meaning by colour alone */
  --success-color:    var(--color-green-400);
  --warning-color:    var(--color-amber-400);
  --danger-color:     var(--color-red-400);

  /* ── Tints ───────────────────────────────────────────────────────────────── */
  /* Soft fills for badges, banners and callouts. Translucent so they pick up
     whichever surface they land on instead of punching a hole in it. */

  --tint-blue-bg:        rgba(59, 130, 246, 0.16);
  --tint-blue-border:    rgba(59, 130, 246, 0.38);
  --tint-blue-text:      var(--color-blue-300);

  --tint-green-bg:       rgba(74, 222, 128, 0.14);
  --tint-green-border:   rgba(74, 222, 128, 0.36);
  --tint-green-text:     var(--color-green-400);

  --tint-amber-bg:       rgba(251, 191, 36, 0.14);
  --tint-amber-border:   rgba(251, 191, 36, 0.36);
  --tint-amber-text:     var(--color-amber-400);

  --tint-red-bg:         rgba(248, 113, 113, 0.14);
  --tint-red-border:     rgba(248, 113, 113, 0.36);
  --tint-red-text:       var(--color-red-400);

  --tint-neutral-bg:     rgba(255, 255, 255, 0.06);
  --tint-neutral-border: rgba(255, 255, 255, 0.14);
  --tint-neutral-text:   var(--color-gray-400);

  /* ── Glass ───────────────────────────────────────────────────────────────── */
  /* Surfaces that let the map watermark through. Alpha only — there is
     deliberately no blur token here. backdrop-filter behind a moving backdrop
     forces the blur to be recomputed every frame: measured on this page, a
     single blurred element halves the frame rate and the full set takes it from
     60fps to 20. The depth has to come from opacity and the hairlines instead.

     Panels sit high (86%) because without blur the county borders would
     otherwise run straight under the body copy; the open bands sit much lower,
     because that is where the map is meant to be seen. */

  --glass-panel:    color-mix(in srgb, var(--bg-surface) 86%, transparent);
  --glass-sunken:   color-mix(in srgb, var(--bg-sunken)  84%, transparent);
  --glass-chrome:   color-mix(in srgb, var(--bg-chrome)  88%, transparent);
  --glass-scrim:    color-mix(in srgb, var(--bg-chrome)  62%, transparent);
  --glass-hairline: color-mix(in srgb, var(--border-color) 60%, transparent);

  /* ── Typography ─────────────────────────────────────────────────────────── */

  --font-serif:  'Georgia', 'Times New Roman', serif;
  --font-sans:   'system-ui', '-apple-system', 'Segoe UI', sans-serif;
  --font-mono:   'ui-monospace', 'Courier New', monospace;

  /* Type scale (px values, used as rem equivalents) */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.8125rem;  /* 13px */
  --text-base:  0.9375rem;  /* 15px */
  --text-md:    1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   2rem;       /* 32px */
  --text-4xl:   3rem;       /* 48px */

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.55;
  --leading-loose:  1.75;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* ── Spacing scale ───────────────────────────────────────────────────────── */

  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */

  /* ── Layout ─────────────────────────────────────────────────────────────── */

  --max-width-content:  1200px;
  --max-width-prose:    680px;
  --max-width-form:     480px;

  /* Horizontal gutter every full-bleed section and centred container shares,
     so their inner edges line up down the page. */
  --gutter:             var(--space-6);

  --masthead-height:    56px;

  /* ── Borders & radius ────────────────────────────────────────────────────── */

  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-pill: 100px;

  --border-width: 1px;

  /* ── Shadows ─────────────────────────────────────────────────────────────── */
  /* Deeper than a light theme needs — on dark surfaces a soft shadow vanishes. */

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.40);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.50);
  --shadow-lg:  0 4px 16px rgba(0,0,0,0.60);

  /* ── Transitions ─────────────────────────────────────────────────────────── */

  --transition-fast:   120ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;

  /* ── Z-index stack ───────────────────────────────────────────────────────── */

  --z-base:     1;
  --z-dropdown: 100;
  --z-masthead: 200;
  --z-flash:    300;
  --z-modal:    400;
}

@media (max-width: 640px) {
  :root {
    --gutter: var(--space-4);
  }
}