/* ============================================================
   THE 90 — Variant 04 · TERRACE
   Design tokens. Warm matchday-print system: cream paper,
   forest-green ink, a vintage clay accent, condensed headlines.
   Same token NAMES as the other variants so base.css just reskins.
   ============================================================ */

:root {
  /* --- Raw palette ------------------------------------------------ */
  --paper:        #FCF8EF;   /* surfaces, cards — warm white */
  --paper-warm:   #F1E9D8;   /* page background — cream */
  --navy:         #17271D;   /* the "ink": deep forest, hero & primary */
  --navy-2:       #1E3327;   /* raised forest surface */
  --navy-3:       #264031;   /* highest forest surface */
  --green:        #1FAE46;   /* signal: live, primary action, the 90 */
  --green-deep:   #0E7A33;   /* green as TEXT on cream (AA) */
  --clay:         #C8412E;   /* editorial accent — derby / featured */
  --clay-deep:    #A83320;   /* clay as text on cream (AA) */
  --grey-line:    #E6DEC9;   /* soft warm line */
  --grey-mid:     #6E6653;   /* tertiary text on cream (AA) */
  --grey-steel:   #544D3C;   /* secondary text on cream */

  /* --- 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(23, 39, 29, 0.13);
  --line-soft:    var(--grey-line);
  --line-strong:  rgba(23, 39, 29, 0.30);
  --hero:         var(--navy);            /* hero card surface */
  --hero-text:    #FBF7EE;
  --hero-text-2:  rgba(251, 247, 238, 0.64);
  --hero-line:    rgba(251, 247, 238, 0.18);
  --accent:       var(--green);           /* never text on light */
  --accent-text:  var(--green-deep);      /* green text, AA on cream */
  --primary-bg:   var(--navy);            /* primary button */
  --primary-text: #FBF7EE;
  --focus:        var(--green-deep);

  /* --- Type -------------------------------------------------------- */
  --font-display: 'Oswald', 'Arial Narrow', 'Archivo', sans-serif;
  --font-body:    'Libre Franklin', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-display:   58px;   /* live scores */
  --fs-hero:      42px;   /* big balances */
  --fs-h1:        29px;
  --fs-h2:        22px;
  --fs-h3:        17px;
  --fs-body:      15px;
  --fs-small:     13px;
  --fs-micro:     11px;
  --fs-nano:      10px;

  --ls-label:     0.08em;
  --ls-loose:     0.1em;
  --ls-wide:      0.24em;

  /* --- 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: crisp ticket-stub ----------------------------------- */
  --r-1: 3px;   /* chips, badges */
  --r-2: 6px;   /* buttons, inputs, cells */
  --r-3: 12px;  /* cards — a touch softer than Club Prime */

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

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

/* --- Semantic: forest inversion (evening matches, screen 04) ------ */
.theme-dark {
  --bg:           var(--navy);
  --surface:      var(--navy-2);
  --text:         #FBF7EE;
  --text-2:       #C3BCA6;
  --text-3:       #9A937E;
  --line:         rgba(251, 247, 238, 0.15);
  --line-soft:    rgba(251, 247, 238, 0.09);
  --line-strong:  rgba(251, 247, 238, 0.34);
  --hero:         var(--navy-3);
  --hero-text:    #FBF7EE;
  --hero-text-2:  rgba(251, 247, 238, 0.64);
  --hero-line:    rgba(251, 247, 238, 0.18);
  --accent-text:  var(--green);            /* AA on forest */
  --primary-bg:   #FBF7EE;
  --primary-text: var(--navy);
  --focus:        var(--green);
}