/* ============================================================================
   weeklylocks-v2 — design tokens
   Single source of truth for color, type, space, shape, motion.
   No framework, no build step: plain CSS custom properties.

   The site is dark-only by design direction, so this file defines ONE palette.
   Every value is a token; components reference tokens, never raw hex.
   Rationale and contrast checks live in DESIGN.md.
   ============================================================================ */

:root {
  /* --- Surfaces -----------------------------------------------------------
     Layered dark, not one flat black. Hue ~222 (blue undertone), each step
     ~+3% lightness. Borders are translucent white hairlines so they read
     correctly on whichever surface they sit on (see DESIGN.md). */
  --surface-page:    #0a0d14;   /* page background, near-black + cool cast   */
  --surface-panel:   #111722;   /* large regions one step up from the page  */
  --surface-card:    #191f2b;   /* cards, pick rows                          */
  --surface-raised:  #222a38;   /* hover / pressed / active row              */

  --hairline:        hsl(220 30% 100% / 0.08);  /* default 1px separator     */
  --hairline-strong: hsl(220 30% 100% / 0.14);  /* card & hero edges         */

  /* --- Accents ----------------------------------------------------------
     Exactly two. Blue = interactive state (links, focus, selected).
     Marquee lime = the single most important element on a page, once only. */
  --accent:          #3d7bff;   /* electric blue: borders, rings, active     */
  --accent-text:     #6ea0ff;   /* blue for text links (brighter, ~7.5:1)    */
  --accent-fill:     #2e64e0;   /* deeper blue behind white text (selected)  */
  --accent-wash:     hsl(222 100% 62% / 0.12);  /* faint blue tint fill      */

  --marquee:         #c6f73e;   /* lime — the "Lock of the Week", nothing else */
  --marquee-ink:     #0a0d14;   /* text/icon color on a lime fill            */

  /* Section wayfinding, NOT a third interactive accent: a warm coral that
     marks the Totals section (its heading + the "Top total" label), the way
     lime marks the Lock. Never on a control, never a fill. ~7:1 on the page. */
  --totals-accent:   #e6836b;

  /* --- Text ramp -------------------------------------------------------
     Grayscale with a faint cool bias. Three usable rungs; --text-faint is
     for decoration/disabled only (below AA on purpose). */
  --text-primary:    #eef1f6;   /* headlines, the numbers that matter   14.6:1 on cards */
  --text-secondary:  #a7b0bf;   /* labels, secondary values              7.5:1 on cards */
  --text-dim:        #8a94a6;   /* timestamps, metadata, eyebrows        5.4:1 cards / 4.7:1 raised — the AA floor */
  --text-faint:      #5c6675;   /* disabled, decorative rules only — below AA on purpose */

  /* --- Outcome semantics ---------------------------------------------
     Derived from the palette, desaturated on purpose — not stoplight. */
  --win:             #5fa88b;   /* muted blue-green (distinct from marquee lime) */
  --loss:            #c97d72;   /* dusty clay, not fire-engine red               */
  --push:            #8a94a6;   /* a push is a non-event — neutral gray          */
  --win-wash:        hsl(157 30% 50% / 0.14);
  --loss-wash:       hsl(9 48% 62% / 0.14);
  --push-wash:       hsl(220 13% 60% / 0.12);

  /* --- Type ---------------------------------------------------------
     One geometric sans. Tabular figures everywhere (set on body below).
     Five sizes, ~1.3 ratio, tight. */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;

  --fs-eyebrow: 0.6875rem;  /* 11px — uppercase tracked labels, column heads */
  --fs-sm:      0.8125rem;  /* 13px — dense table body, secondary text       */
  --fs-body:    0.9375rem;  /* 15px — default running text, matchup names    */
  --fs-title:   1.375rem;   /* 22px — section headers, the Lock matchup      */
  --fs-hero:    2.5rem;     /* 40px — the one hero figure per page           */

  --lh-tight:   1.1;        /* hero numbers, headings   */
  --lh-snug:    1.3;        /* titles                   */
  --lh-normal:  1.5;        /* body                     */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;        /* hero figure only         */

  --tracking-eyebrow: 0.09em;

  /* --- Space ------------------------------------------------------
     4px base unit; 8px is the working step. 12px is allowed for dense
     row rhythm; everything larger is a multiple of 8. Named by pixel
     value so there is never a question what a number means. */
  --space-4:  4px;    /* inline gaps: icon-to-text, dot-to-label */
  --space-8:  8px;
  --space-12: 12px;   /* dense row padding — the one non-8 step  */
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  /* --- Shape ----------------------------------------------------- */
  --radius-sm:   8px;    /* buttons, chips inside a card, table wrapper */
  --radius-md:   12px;   /* cards, pick rows                            */
  --radius-lg:   14px;   /* panels, the Lock of the Week card           */
  --radius-pill: 999px;  /* chips, tags, filters, dots, the record pill */

  /* --- Motion --------------------------------------------------- */
  --transition: 120ms ease;
  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--accent);

  /* --- Layout -------------------------------------------------- */
  --measure: 60ch;      /* running-text max width            */
  --page-max: 960px;    /* content column max width          */
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0ms; }
}

/* ----------------------------------------------------------------------------
   Base element defaults that belong with the tokens.
   ---------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-variant-numeric: tabular-nums;      /* every digit column aligns */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent-text);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Small uppercase letter-spaced label — column headers, section eyebrows. */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-dim);
}