/* ============================================================
   FinGo design tokens
   ------------------------------------------------------------
   First token file for the FinGo web estate. Before this, the
   live site had ZERO custom properties and ZERO var() usages
   across all 10 stylesheets (measured 2026-08-17, app.d7f021c.css
   + 9 chunks = 124,354 bytes uncompressed).

   PALETTE DRIFT — read before using.
   Counted across every live stylesheet on www.fingo.to:
       #2E225F  brand purple   14 occurrences   IN USE
       #EE2365  brand pink      0 occurrences   NOT ON THE SITE
       #6E56B5  brand violet    0 occurrences   NOT ON THE SITE
       #F22626  red             8 occurrences   de-facto accent
       #FA2828  red             2 occurrences   de-facto accent
   The brand palette and the shipped palette disagree. This file
   treats the brand palette as authoritative and keeps the two
   reds as explicitly-named legacy aliases so the drift is
   visible in code rather than silent. Someone who owns the brand
   needs to settle this before a wide rollout.
   ============================================================ */

:root {
  /* ---- brand ---- */
  --fg-purple:        #2E225F;
  --fg-pink:          #EE2365;
  --fg-violet:        #6E56B5;

  /* ---- legacy: shipped on www.fingo.to, not in the brand palette ---- */
  --fg-legacy-red:    #F22626;
  --fg-legacy-red-2:  #FA2828;

  /* ---- purple ramp, mixed from --fg-purple so the hue stays honest ---- */
  --fg-purple-900:    #100C22;
  --fg-purple-800:    #171325;
  --fg-purple-700:    #221A47;
  --fg-purple-600:    #2E225F;
  --fg-purple-500:    #453476;
  --fg-purple-400:    #6E56B5;
  --fg-purple-300:    #9D8BD0;
  --fg-purple-200:    #C9BEE6;
  --fg-purple-100:    #E7E1F4;
  --fg-purple-050:    #F7F6FA;

  /* ---- neutrals, biased toward the brand hue rather than pure grey ---- */
  --fg-ink:           #241F33;
  --fg-ink-soft:      #55506B;
  --fg-ink-faint:     #8A85A0;
  --fg-line:          #E2DEEC;
  --fg-paper:         #FFFFFF;

  /* ---- semantic surface tokens: components read ONLY these ---- */
  --fg-bg:            var(--fg-purple-050);
  --fg-bg-raised:     var(--fg-paper);
  --fg-fg:            var(--fg-ink);
  --fg-fg-soft:       var(--fg-ink-soft);
  --fg-fg-faint:      var(--fg-ink-faint);
  --fg-border:        var(--fg-line);
  --fg-accent:        var(--fg-pink);
  --fg-accent-fg:     #FFFFFF;
  /* Small text in the accent family. --fg-accent is 4.15:1 on white and
     FAILS WCAG AA for body text; this is 5.91:1 and passes. Pink stays for
     large display type, fills and non-text marks. Measured, not estimated. */
  --fg-accent-text:   #C4134E;


  /* ---- the dark panel used for product reveals (fixed in both themes,
          because a full-bleed product section is deliberately dark) ---- */
  --fg-stage-bg:      var(--fg-purple-800);
  --fg-stage-fg:      #F4F2FB;
  --fg-stage-fg-soft: #B3AACE;
  --fg-stage-glow:    var(--fg-violet);

  /* ---- type ---- */
  --fg-font-display: "Athletics", ui-sans-serif, -apple-system,
                     "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fg-font-body:    "Athletics", ui-sans-serif, -apple-system,
                     "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fg-font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo,
                     Consolas, monospace;

  /* Display scale. The live site tops out at 48px with 14px body,
     which is why it does not read as a product page. This scale is
     built for large restrained type. */
  --fg-step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --fg-step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --fg-step-1:  clamp(1.25rem, 1.15rem + 0.50vw, 1.55rem);
  --fg-step-2:  clamp(1.65rem, 1.40rem + 1.10vw, 2.30rem);
  --fg-step-3:  clamp(2.20rem, 1.65rem + 2.40vw, 3.60rem);
  --fg-step-4:  clamp(2.80rem, 1.70rem + 4.80vw, 6.00rem);

  --fg-tracking-tight: -0.022em;
  --fg-tracking-label:  0.10em;

  /* ---- space, on a 4px base ---- */
  --fg-space-1: 0.25rem;
  --fg-space-2: 0.5rem;
  --fg-space-3: 0.75rem;
  --fg-space-4: 1rem;
  --fg-space-6: 1.5rem;
  --fg-space-8: 2rem;
  --fg-space-12: 3rem;
  --fg-space-16: 4rem;
  --fg-space-24: 6rem;

  --fg-measure: 62ch;
  --fg-radius:  14px;
}

/* Dark theme. Guarded so an explicit light choice beats a dark OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fg-bg:        var(--fg-purple-900);
    --fg-bg-raised: var(--fg-purple-800);
    --fg-fg:        #F2F0F8;
    --fg-fg-soft:   #B8B2CC;
    --fg-fg-faint:  #7E7896;
    --fg-border:    #2C2545;
    /* pink on a dark violet ground is harsh at full saturation */
    --fg-accent:    #FF4E80;
  --fg-accent-text: #FF4E80;
    /* On this ground the full accent already passes for body (6.06:1), so the
       small-text variant is the same colour. Left explicit rather than
       inherited: #C4134E from the light block would be 2.7:1 here. */
    --fg-accent-text: #FF4E80;
  }
}

/* Explicit toggle wins in the other direction too. */
:root[data-theme="dark"] {
  --fg-bg:        var(--fg-purple-900);
  --fg-bg-raised: var(--fg-purple-800);
  --fg-fg:        #F2F0F8;
  --fg-fg-soft:   #B8B2CC;
  --fg-fg-faint:  #7E7896;
  --fg-border:    #2C2545;
  --fg-accent:    #FF4E80;
  --fg-accent-text: #FF4E80;
}