/* ============================================================
   1440Sports — design tokens (dark "field" register)
   Ported from the Mission Control system: src/app/globals.css
   Single source of truth. Never use raw hex in styles.css —
   always var(--token). See docs/style-guide.md in 1440sports-ops.
   ============================================================ */

:root {
  /* ── Brand ─────────────────────────────────────── */
  --navy:      #1C2355;
  --navy-900:  #131737;
  --gold:      #CAAF7F;
  --gold-soft: #D8C29A;
  --gold-700:  #A88E62;
  --white:     #FFFFFF;

  --grad-gold-1: #E5D4B5;
  --grad-gold-2: #CAAF7F;
  --grad-gold-3: #A88E62;
  --grad-gold:   linear-gradient(135deg, var(--grad-gold-1), var(--grad-gold-2), var(--grad-gold-3));

  /* programme tones */
  --tcs:    #5BC0BE;   /* teal      */
  --aveva:  #7DD3FC;   /* pale cyan */
  --mclaren:#FF8700;   /* McLaren papaya — dark-register value */

  /* ── Surfaces (dark) ───────────────────────────── */
  --bg:        #0B0E24;
  --bg-2:      #0F1330;
  --surface:   #161B3F;
  --surface-2: #1D2350;
  --surface-3: #262C5C;

  /* ── Lines ─────────────────────────────────────── */
  --line:      rgba(255,255,255,0.07);
  --line-2:    rgba(255,255,255,0.12);
  --rule-strong: rgba(255,255,255,0.22);

  /* ── Foreground ────────────────────────────────── */
  --fg:        #F5F1EA;
  --fg-2:      #B8BCD4;
  --fg-3:      #7B82A6;
  --fg-4:      #565B82;

  /* ── Status semantics ──────────────────────────── */
  --ok:        #5BC08F;
  --warn:      #CAAF7F;
  --danger:    #F0846B;
  --live:      #5BC0BE;

  /* tonal tints (the STATUS_TONES quads from the style guide) */
  --gold-soft-bg:   rgba(202,175,127,0.14);
  --gold-softer-bg: rgba(202,175,127,0.07);
  --tone-gold-bg:    rgba(202,175,127,0.10);
  --tone-gold-line:  rgba(202,175,127,0.30);
  --tone-cyan-bg:    rgba(125,211,252,0.10);
  --tone-cyan-line:  rgba(125,211,252,0.30);
  --tone-live-bg:    rgba(91,192,190,0.12);
  --tone-live-line:  rgba(91,192,190,0.35);
  --tone-ok-bg:      rgba(91,192,143,0.12);
  --tone-ok-line:    rgba(91,192,143,0.30);
  --tone-mclaren-bg: rgba(255,135,0,0.10);
  --tone-mclaren-line: rgba(255,135,0,0.32);

  /* ── Rhythm ────────────────────────────────────── */
  --sp-tight:  16px;
  --sp-base:   24px;
  --sp-loose:  32px;

  /* Editorial-sharp radius register. Tile/card/button = 2px,
     pills = 999. No 6/10/12. */
  --card-radius: 2px;
  --btn-radius:  2px;
  --pill-radius: 999px;

  /* Cards are flat by decree — hairline borders, no shadow.
     Only floating things (sticky nav) may use this. */
  --shadow-elevated: none;
  --nav-shadow: 0 1px 0 var(--line);

  /* ── Layout ────────────────────────────────────── */
  --maxw:  1040px;
  --nav-h: 60px;

  /* ── Type ──────────────────────────────────────── */
  --font-display: "Montserrat", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, Menlo, Monaco, "SF Mono", monospace;

  /* house motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── Base reset ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* clear the sticky nav when jumping to an anchor */
section[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}