/* ============================================================
   THE 90 — Variant 01 · CLUB PRIME
   Design tokens. Light-led editorial system, navy ink on paper,
   signal green reserved for live states and primary actions.
   ============================================================ */

:root {
  /* --- Raw palette ------------------------------------------------ */
  --paper:        #FFFFFF;   /* surfaces, cards */
  --paper-warm:   #FAFAF7;   /* page background */
  --navy:         #050A30;   /* ink & hero surfaces */
  --navy-2:       #0A1140;   /* raised navy surface */
  --navy-3:       #0D1648;   /* highest navy surface */
  --green:        #24FF00;   /* signal: live, primary action, the 90 */
  --green-deep:   #0A8F3C;   /* green as TEXT on light (AA) */
  --grey-line:    #E9EAF0;   /* soft neutral line */
  --grey-mid:     #6E7487;   /* tertiary text on light (AA) */
  --grey-steel:   #5A6173;   /* secondary text on light */

  /* --- Semantic: light (default) ---------------------------------- */
  --bg:           var(--paper-warm);
  --surface:      var(--paper);
  --text:         var(--navy);
  --text-2:       var(--grey-steel);
  --text-3:       var(--grey-mid);
  --line:         rgba(5, 10, 48, 0.12);
  --line-soft:    var(--grey-line);
  --line-strong:  rgba(5, 10, 48, 0.28);
  --hero:         var(--navy);            /* hero card surface */
  --hero-text:    #FFFFFF;
  --hero-text-2:  rgba(255, 255, 255, 0.62);
  --hero-line:    rgba(255, 255, 255, 0.16);
  --accent:       var(--green);           /* never text on light */
  --accent-text:  var(--green-deep);      /* green text, AA on light */
  --primary-bg:   var(--navy);            /* primary button */
  --primary-text: #FFFFFF;
  --focus:        var(--green-deep);

  /* --- Type -------------------------------------------------------- */
  --font-display: 'Rubik One', 'Arial Black', 'Archivo', sans-serif;
  --font-body:    'Archivo', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-display:   56px;   /* live scores */
  --fs-hero:      40px;   /* big balances */
  --fs-h1:        27px;
  --fs-h2:        21px;
  --fs-h3:        17px;
  --fs-body:      15px;
  --fs-small:     13px;
  --fs-micro:     11px;
  --fs-nano:      10px;

  --ls-label:     0.1em;
  --ls-loose:     0.12em;
  --ls-wide:      0.28em;

  /* --- Space (4px scale) ------------------------------------------ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px;
  --pad-page: 24px;

  /* --- Shape: sharp ------------------------------------------------ */
  --r-1: 2px;   /* chips, badges, monograms */
  --r-2: 4px;   /* buttons, inputs, cells */
  --r-3: 6px;   /* cards */

  /* --- Motion ------------------------------------------------------ */
  --t-fast: 150ms ease-out;
  --t-med:  200ms ease-out;

  /* --- Layout ------------------------------------------------------ */
  --app-max:  430px;
  --tap:      44px;
  --tabbar-h: 78px;
}

/* --- Semantic: navy inversion (evening matches, screen 04) -------- */
.theme-dark {
  --bg:           var(--navy);
  --surface:      var(--navy-2);
  --text:         #FFFFFF;
  --text-2:       #A9AFC8;
  --text-3:       #8A91B4;
  --line:         rgba(255, 255, 255, 0.14);
  --line-soft:    rgba(255, 255, 255, 0.09);
  --line-strong:  rgba(255, 255, 255, 0.34);
  --hero:         var(--navy-3);
  --hero-text:    #FFFFFF;
  --hero-text-2:  rgba(255, 255, 255, 0.62);
  --hero-line:    rgba(255, 255, 255, 0.16);
  --accent-text:  var(--green);            /* AA on navy */
  --primary-bg:   #FFFFFF;
  --primary-text: var(--navy);
  --focus:        var(--green);
}