/* ==========================================================================
   Lady J Football Club — design tokens
   The single source of truth. Nothing below this file should contain a raw
   hex value or a magic number; if a value is needed twice, it belongs here.

   Rendered in full, with measured contrast ratios, at /?site=styleguide
   ========================================================================== */

:root {

  /* --- brand -------------------------------------------------------------
     Taken from the club crest. Lime is an accent, not a colour: roughly
     60% navy, 30% light surface, 10% lime across any given page. */
  --navy:        #111a4f;
  --navy-deep:   #070c2b;
  --navy-lift:   #1b2668;   /* navy raised one step, for borders on navy */
  --royal:       #3c6fd1;
  --royal-deep:  #2c53a2;   /* royal that passes AA on white */
  --royal-soft:  #6d97e4;   /* focus rings on navy */
  --lime:        #c6e22e;
  --lime-deep:   #6a7a05;   /* lime dark enough for text on white — 4.77:1 */

  /* --- neutral ramp ------------------------------------------------------
     Derived from the navy hue rather than pure grey, so greys sit in the
     same family as the brand instead of muddying against it. */
  --n-50:  #f6f8fc;
  --n-100: #eef1f8;
  --n-200: #dde3ef;
  --n-300: #c3cddf;
  --n-400: #97a4c1;
  --n-500: #6f7d9f;
  --n-600: #515f80;
  --n-700: #3a4665;
  --n-800: #252e49;
  --n-900: #141b30;

  /* --- semantic surfaces -------------------------------------------------
     Components reference these, never the ramp directly, so a dark theme is
     a change of eleven values rather than a rewrite. */
  --surface:         #ffffff;
  --surface-sunk:    var(--n-50);
  --surface-raised:  #ffffff;
  --surface-invert:  var(--navy);
  --border:          var(--n-200);
  --border-strong:   var(--n-300);
  --text-primary:    var(--navy);
  --text-body:       var(--n-700);
  --text-muted:      var(--n-600);
  --text-on-navy:    #ffffff;
  --text-on-navy-dim:#c3cee9;
  --link:            var(--royal-deep);

  /* --- match outcome -----------------------------------------------------
     Never colour alone: every use is paired with the word Won, Drew or Lost,
     because roughly one in twelve men and one in two hundred women cannot
     separate these two hues, and a scoreline is not worth guessing at. */
  --win:   #17713b;
  --draw:  var(--n-600);
  --loss:  #a32020;
  --win-bg:  #e7f5ec;
  --draw-bg: var(--n-100);
  --loss-bg: #fbeaea;

  /* --- type --------------------------------------------------------------
     Two faces of one superfamily. Condensed for display because a scoreboard
     and the numerals on a shirt back are this subject's own vernacular. */
  --font-body:    Barlow, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Barlow Condensed", Barlow, "Arial Narrow", system-ui, sans-serif;

  /* Modular scale, 1.25 (major third), 16px base. Dense enough for tables of
     numbers without the steps becoming comic. */
  --t-2xs:  0.64rem;    /* 10.2px — legal lines only */
  --t-xs:   0.8rem;     /* 12.8px */
  --t-sm:   0.875rem;   /* 14px  — off-scale, held for UI controls */
  --t-base: 1rem;       /* 16px  */
  --t-md:   1.25rem;    /* 20px  */
  --t-lg:   1.5625rem;  /* 25px  */
  --t-xl:   1.953rem;   /* 31.3px */
  --t-2xl:  2.441rem;   /* 39.1px */

  /* Display sizes deliberately leave the scale and are fluid: a scoreboard
     is meant to shout, and shouting does not interpolate politely. */
  --d-hero: clamp(2.9rem, 6.6vw, 5.25rem);
  --d-1:    clamp(2rem, 4.2vw, 3.05rem);
  --d-2:    clamp(1.6rem, 2.8vw, 2.441rem);
  --d-score:clamp(2.4rem, 5vw, 3.4rem);

  --lh-tight:  0.98;
  --lh-snug:   1.2;
  --lh-body:   1.65;
  --track-display: -0.01em;   /* condensed type needs almost none */
  --track-label:    0.14em;

  /* --- space -------------------------------------------------------------
     4px base. Named by size, not by purpose, so they compose. */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  --wrap: 1160px;

  /* --- radius ------------------------------------------------------------
     Structural blocks stay near-square to keep the scoreboard character.
     Only things you can click get a softened corner. */
  --r-0:    0;
  --r-sm:   3px;
  --r-md:   7px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* --- elevation ---------------------------------------------------------
     Two levels. A third would be decoration. */
  --shadow-1: 0 1px 2px rgba(7, 12, 43, .06), 0 2px 8px rgba(7, 12, 43, .05);
  --shadow-2: 0 2px 6px rgba(7, 12, 43, .08), 0 12px 28px rgba(7, 12, 43, .10);

  /* --- motion ------------------------------------------------------------
     Motion answers an action here; nothing moves on its own. */
  --ease:      cubic-bezier(.2, .8, .2, 1);
  --dur-fast:  120ms;
  --dur:       200ms;
}

/* Honour the system setting. Everything that moves is a response to a click
   or a hover, so removing it costs nothing but the flourish. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; }
}