/* ==========================================================================
   MatchProbs — Phase 2B SITEWIDE design system (single source of truth).

   The authoritative shared custom-property layer. Extracted verbatim from the
   APPROVED landing visual system in templates/pfi.html @ 6b7cca0 (the `--l-*`
   set previously scoped under body.landing-theme). Promoted here to :root so
   every browser-rendered surface shares one token layer.

   This file ONLY defines custom properties (no component rules), so linking it
   never changes layout on its own — pages opt in by consuming the tokens.

   Legacy alias names (--bg, --gold, --text, --accent, --border, --shadow, ...)
   are re-pointed at the light values so the pre-existing, well-tokenized
   stylesheets (static/app/styles.css and inline page styles) inherit the light
   system without a per-rule rewrite. Hardcoded dark literals and dark-specific
   rules are removed per-page.
   ========================================================================== */
:root {
  /* ---- Approved Phase 2B light palette (source of truth) ---- */
  --l-paper:    #f3eee2;   /* warm off-white main surface */
  --l-paper-2:  #ebe4d3;   /* slightly deeper band */
  --l-card:     #fbf8f1;   /* raised card */
  --l-navy:     #122540;   /* deep navy: structure + strong text */
  --l-navy-2:   #0d1b30;   /* darker navy surface */
  --l-ink:      #16202e;   /* body text */
  --l-teal:     #0f736a;   /* probabilities / analysis / data (AA on paper) */
  --l-teal-2:   #0b5a53;
  --l-teal-ink: #094b45;
  /* Orange, accessible: #b54a19 clears AA both ways (white-on-it 5.31:1 for
     buttons; on paper 4.58:1 for normal text) while keeping the burnt-orange
     identity. --l-orange-bright is the original #cf5a24, retained ONLY for
     large-scale / decorative use (>=3:1). */
  --l-orange:   #b54a19;   /* primary action + emphasis (AA normal text + buttons) */
  --l-orange-2: #9e3d10;   /* hover / pressed (white 6.7:1) */
  --l-orange-bright: #cf5a24; /* large/decorative accents only (>=3:1) */
  --l-line:     #dcd2bf;
  --l-line-2:   #c9bea6;
  --l-muted:    #566070;   /* AA on paper (5.49:1); NOT for use on navy */
  --l-dim:      #5e6674;    /* muted text — AA normal text on every shared light surface
                              (paper 5.00:1, paper-2 4.57:1, card 5.46:1, white 5.79:1);
                              stays lighter than --l-muted so the hierarchy is preserved */
  --l-win:      #1a7a49;   /* positive — AA on paper (4.62:1) */
  --l-draw:     #8a6410;   /* draw / warning — AA on paper (4.64:1) */
  --l-loss:     #b1462f;   /* loss / danger — AA on paper (4.79:1) */
  /* On-navy text tints (light) for taglines/meta over the navy nav. */
  --l-on-navy:      #e8eef5;  /* strong light-on-navy (13:1) */
  --l-on-navy-soft: #9fb4c9;  /* secondary light-on-navy (7.2:1) */
  --l-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --l-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, "Courier New", monospace;

  /* ---- Semantic color-coding (consistent product-wide) ---- */
  --sem-brand:        var(--l-orange);   /* brand emphasis */
  --sem-action:       var(--l-orange);   /* primary action */
  --sem-action-2:     var(--l-orange-2); /* primary action hover */
  --sem-structure:    var(--l-navy);     /* secondary action / structure */
  --sem-data:         var(--l-teal);     /* probability / analytical data */
  --sem-data-2:       var(--l-teal-2);
  --sem-positive:     var(--l-win);      /* positive / success */
  --sem-info:         var(--l-teal);     /* informational */
  --sem-warning:      var(--l-draw);     /* warning / elevated risk */
  --sem-danger:       var(--l-loss);     /* error / destructive */
  --sem-disabled-bg:  #e7e0d0;           /* disabled surface */
  --sem-disabled-fg:  #9aa1ab;           /* disabled text */
  --sem-focus:        var(--l-orange);   /* keyboard focus ring */

  /* Categorical (home / draw / away) — CATEGORY only, not good/bad. */
  --home: var(--l-orange);
  --draw: var(--l-draw);
  --away: var(--l-teal);

  /* ---- Legacy alias remaps: dark names -> light values ----
     Lets pre-tokenized stylesheets inherit the light theme. Any page linking
     this file and dropping its own dark :root picks these up. */
  --bg:           var(--l-paper);
  --bg2:          var(--l-paper-2);
  --bg3:          var(--l-card);
  --bg4:          #ffffff;
  --bg-elev:      var(--l-card);
  --bg-elev-2:    #ffffff;
  --border:       var(--l-line);
  --border2:      var(--l-line-2);
  --border-soft:  var(--l-line);
  --gold:         var(--l-orange);
  --gold-bright:  var(--l-orange-2);
  --gold-dim:     var(--l-orange-2);
  --gold-glow:    rgba(207, 90, 36, 0.12);
  --gold-faint:   rgba(207, 90, 36, 0.06);
  --accent:       var(--l-orange);
  --accent-soft:  rgba(207, 90, 36, 0.12);
  --accent-warm:  var(--l-orange);
  --accent-warm-soft: rgba(207, 90, 36, 0.10);
  --red:          var(--l-loss);
  --red-dim:      var(--l-orange-2);
  --red-bg:       rgba(177, 70, 47, 0.12);
  --green:        var(--l-win);
  --green-dim:    #17693f;
  --green-bg:     rgba(31, 138, 84, 0.12);
  --blue:         var(--l-teal);
  --blue-dim:     var(--l-teal-2);
  --amber:        var(--l-draw);
  --amber-bg:     rgba(176, 132, 23, 0.14);
  --text:         var(--l-ink);
  --text-dim:     var(--l-muted);
  --text-bright:  var(--l-navy);
  --text-muted:   var(--l-dim);
  --prob-label:   var(--l-muted);

  /* Shape / elevation / motion */
  --radius:    12px;
  --radius-sm: 8px;
  --gap:       14px;
  --gap-lg:    22px;
  --shadow:    0 1px 2px rgba(18, 37, 64, 0.06), 0 8px 24px rgba(18, 37, 64, 0.10);
  --shadow-sm: 0 1px 2px rgba(18, 37, 64, 0.08);
  --font:      var(--l-mono);
  --mono:      var(--l-mono);
}