/* METROPOL — Design Tokens
   Single source of truth for color / type / spacing / motion.
   Hard rule: zero color saturation. Only black, white, and the grey scale
   between them. Treat the system like a film print — contrast is
   composition, not decoration.
*/

:root {
  /* ───── Color ─────────────────────────────────────────── */
  --m-bg:            #000000;   /* page */
  --m-surface:       #0a0a0a;   /* cards, overlays, departure-row bg */
  --m-surface-2:     #141414;   /* hover / elevated */
  --m-light:         #f4f2ee;   /* light-plate bg (white shirt, editorial) */
  --m-light-2:       #ddd9d2;   /* light-plate gradient end */

  --m-border:        #1f1f1f;   /* dividers — default */
  --m-border-subtle: #2a2a2a;   /* dividers — quieter */
  --m-border-bright: rgba(255,255,255,0.18);  /* on photographic bg */

  --m-fg:            #ffffff;   /* primary text */
  --m-fg-dim:        #cfcfcf;   /* secondary on dark */
  --m-fg-muted:      #9a9a9a;   /* meta / labels on dark */
  --m-fg-faint:      #7a7a7a;   /* tertiary */
  --m-fg-disabled:   #555555;

  --m-fg-invert:     #0a0a0a;   /* text on light */
  --m-fg-invert-dim: #5a5a5a;

  /* ───── Typography ─────────────────────────────────────── */
  --m-font-mono:    'JetBrains Mono', 'Space Mono', ui-monospace, monospace;
  --m-font-display: 'Inter', 'Helvetica Neue', system-ui, sans-serif;

  /* Type scale — used in V7 + V10. clamp() values for hero so it
     reads on every viewport without media queries. */
  --m-text-hero:    clamp(72px, 11vw, 140px);   /* "BOARD THE NEXT METRO." */
  --m-text-display: clamp(48px, 6vw, 88px);     /* page titles */
  --m-text-h1:      48px;
  --m-text-h2:      36px;
  --m-text-h3:      28px;
  --m-text-h4:      18px;
  --m-text-body:    14px;
  --m-text-small:   12px;
  --m-text-meta:    11px;
  --m-text-label:   10px;
  --m-text-micro:    9px;

  /* Letter spacing */
  --m-track-tight:   -0.04em;   /* hero numerals */
  --m-track-display: -0.02em;   /* time, headlines */
  --m-track-body:     0.04em;   /* row destinations */
  --m-track-label:    0.22em;   /* nav, kickers */
  --m-track-mono:     0.18em;   /* tickers */
  --m-track-wide:     0.40em;   /* cinematic kickers (V10) */

  /* Line height */
  --m-leading-hero:  0.92;
  --m-leading-snug:  1.10;
  --m-leading-body:  1.55;
  --m-leading-loose: 1.70;

  /* Weight */
  --m-w-regular:  400;
  --m-w-medium:   500;
  --m-w-semibold: 600;
  --m-w-bold:     700;

  /* ───── Spacing — 8px base ─────────────────────────────── */
  --m-s-1:   4px;
  --m-s-2:   8px;
  --m-s-3:  12px;
  --m-s-4:  16px;
  --m-s-5:  20px;
  --m-s-6:  24px;
  --m-s-8:  32px;
  --m-s-10: 40px;
  --m-s-12: 48px;
  --m-s-16: 64px;
  --m-s-20: 80px;
  --m-s-24: 96px;

  /* ───── Layout ─────────────────────────────────────────── */
  --m-content-max:    1440px;
  --m-gutter:         48px;        /* default page gutter */
  --m-gutter-tight:   40px;        /* departure-board gutter */
  --m-gutter-mobile:  24px;

  /* ───── Radius — NONE. Hard edges always. ──────────────── */
  --m-r: 0;

  /* ───── Motion ─────────────────────────────────────────── */
  --m-t-fast:      0.15s;
  --m-t-base:      0.30s;
  --m-t-slow:      0.60s;
  --m-t-cinematic: 1.20s;

  --m-ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --m-ease-io:     cubic-bezier(0.4, 0.0, 0.2, 1);

  /* ───── Effects ────────────────────────────────────────── */
  --m-shadow-plate:   0 30px 40px rgba(0,0,0,0.5);
  --m-shadow-poster:  0 0 60px rgba(0,0,0,0.7);
  --m-grain-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Light section override — flip the palette without rewriting components.
   Wrap any section that should read as light-on-dark with .m-light. */
.m-light {
  --m-bg:        var(--m-light);
  --m-surface:   var(--m-light-2);
  --m-border:    var(--m-fg-invert);
  --m-border-subtle: rgba(10,10,10,0.18);
  --m-fg:        var(--m-fg-invert);
  --m-fg-dim:    #2a2a2a;
  --m-fg-muted:  var(--m-fg-invert-dim);
  --m-fg-faint:  #888;
}