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

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