/* ============================================================
   THE 90 — Variant 05 · RALLY
   Design tokens. Bright modern-app system: clean white/grey,
   charcoal ink, a tangerine action accent, rounded geometry.
   Same token NAMES as the other variants so base.css just reskins.
   ============================================================ */

:root {
  /* --- Raw palette ------------------------------------------------ */
  --paper:        #FFFFFF;   /* cards, surfaces */
  --paper-warm:   #F4F5F8;   /* page background — cool clean */
  --navy:         #1A1C22;   /* the "ink": charcoal — hero, selected */
  --navy-2:       #23262F;   /* raised dark surface */
  --navy-3:       #2C3039;   /* highest dark surface */
  --green:        #15B43A;   /* signal: live, the 90 */
  --green-deep:   #0C8A2C;   /* green as TEXT on light (AA) */
  --tangerine:    #FF5A1F;   /* primary action / energy accent */
  --tangerine-deep:#E0430C;  /* tangerine as text on light (AA) */
  --grey-line:    #ECEEF2;   /* soft cool line */
  --grey-mid:     #6B7180;   /* tertiary text (AA) */
  --grey-steel:   #4A4F5C;   /* secondary text */

  /* --- 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(26, 28, 34, 0.10);
  --line-soft:    var(--grey-line);
  --line-strong:  rgba(26, 28, 34, 0.20);
  --hero:         var(--navy);            /* hero card surface */
  --hero-text:    #FFFFFF;
  --hero-text-2:  rgba(255, 255, 255, 0.66);
  --hero-line:    rgba(255, 255, 255, 0.16);
  --accent:       var(--green);
  --accent-text:  var(--green-deep);
  --primary-bg:   var(--tangerine);       /* primary button — tangerine */
  --primary-text: #FFFFFF;
  --focus:        var(--tangerine-deep);

  /* --- Type -------------------------------------------------------- */
  --font-display: 'Bricolage Grotesque', 'Archivo', sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-display:   56px;
  --fs-hero:      42px;
  --fs-h1:        28px;
  --fs-h2:        21px;
  --fs-h3:        17px;
  --fs-body:      15px;
  --fs-small:     13px;
  --fs-micro:     11px;
  --fs-nano:      10px;

  --ls-label:     0.06em;
  --ls-loose:     0.08em;
  --ls-wide:      0.2em;

  /* --- 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: 22px;

  /* --- Shape: rounded & friendly ---------------------------------- */
  --r-1: 8px;    /* chips, badges */
  --r-2: 14px;   /* buttons, inputs, cells */
  --r-3: 22px;   /* cards */

  /* --- Motion: springy -------------------------------------------- */
  --t-fast: 140ms cubic-bezier(0.2, 0.7, 0.3, 1);
  --t-med:  200ms cubic-bezier(0.2, 0.7, 0.3, 1);

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

/* --- Semantic: charcoal inversion (evening matches, screen 04) ---- */
.theme-dark {
  --bg:           var(--navy);
  --surface:      var(--navy-2);
  --text:         #FFFFFF;
  --text-2:       #B7BCC8;
  --text-3:       #8C92A1;
  --line:         rgba(255, 255, 255, 0.12);
  --line-soft:    rgba(255, 255, 255, 0.08);
  --line-strong:  rgba(255, 255, 255, 0.30);
  --hero:         var(--navy-3);
  --hero-text:    #FFFFFF;
  --hero-text-2:  rgba(255, 255, 255, 0.66);
  --hero-line:    rgba(255, 255, 255, 0.16);
  --accent-text:  var(--green);
  --primary-bg:   var(--tangerine);
  --primary-text: #FFFFFF;
  --focus:        var(--tangerine);
}