/* Self-hosted Outfit (variable). No third-party font CDN, no IP transfer to Google. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 300 600;
  src: url('../fonts/outfit.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 300 600;
  src: url('../fonts/outfit-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   FOXI · DESIGN TOKENS — SINGLE SOURCE OF TRUTH
   Industrial Quiet. Nothing outside this file defines a raw
   color, font, radius, or motion curve. Everything references
   these variables via var(). Change the brand here, once.
   ============================================================ */

:root {
  /* ---- Canvas & surfaces ---- */
  --canvas:        #F8F6F1;   /* ivory — page background */
  --canvas-warm:   #F2EFE8;   /* warmer ivory — alternating depth */
  --surface:       #FFFFFF;   /* pure white — cards, bento, frames */
  --surface-sunk:  #FAF8F3;   /* faint recess inside frames */

  /* ---- Ink (text) ---- */
  --ink:           #1E1B3A;   /* warm near-black — primary text */
  --ink-soft:      #52526B;   /* muted — body, sublines */
  --ink-faint:     #616B8A;   /* dormant text, captions at rest — darkened from #9CA3AF to clear WCAG AA (4.5:1) on canvas */
  --ink-onGold:    #FFFFFF;   /* dark ink sits on gold for luxury contrast */

  /* ---- Accents ---- */
  --gold:          #D97706;   /* FOXI amber — the fox's orange */
  --gold-strong:   #B45309;   /* deepened amber */
  --gold-light:    #F59E0B;   /* bright amber tip */
  --gold-tint:     #FBEEDB;   /* soft amber wash */
  --indigo:        #7C3AED;   /* FOXI violet — the brand's purple half */
  --indigo-deep:   #5B21B6;   /* deep violet — gradient start */
  --indigo-spine:  #3D3A7C;   /* muted deep lilac — identity spine */
  --indigo-tint:   #F0EAFB;   /* soft violet wash */

  /* THE FOXI GRADIENT — violet melting into amber. The signature.
     Capped at gold-strong (was #D97706 at 100%): the lighter amber tail
     dropped white CTA text to ~3.2:1, below WCAG AA. Flat gold-strong
     from 72% on keeps the melt and clears 4.5:1. */
  --grad-brand: linear-gradient(135deg, #5B21B6 0%, #7C3AED 34%, #B45309 72%);
  --grad-gold:  linear-gradient(135deg, #B45309 0%, #D97706 55%, #F59E0B 100%);

  /* ---- Dormant state (grayscale-at-rest) ---- */
  --dormant:       #9CA3AF;   /* icons / marks muted until awakened */
  --dormant-line:  #E9E5DC;   /* hairline borders */
  --dormant-fill:  #F3F0E9;   /* dormant chip fill */

  /* ---- Feedback ---- */
  --positive:      #10B981;   /* approvals / success ticks */
  --error:         #B3261E;   /* failed submits — muted red, kept out of the brand gradient */

  /* ---- Typography ---- */
  --font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --tracking:       -0.008em;   /* global letter-spacing */
  --tracking-tight: -0.02em;    /* display sizes */
  --tracking-wide:   0.04em;    /* eyebrows / labels */

  /* fluid type scale — clamp(min, preferred, max) */
  --fs-display: clamp(2.7rem, 1.4rem + 5.4vw, 5.2rem);
  --fs-hero:    clamp(2.5rem, 1.7rem + 3.2vw, 3.75rem);  /* two-column hero H1 — narrower column than full-bleed display */
  --fs-h1:      clamp(2.1rem, 1.3rem + 3.4vw, 3.5rem);
  --fs-h2:      clamp(1.7rem, 1.2rem + 2.1vw, 2.5rem);
  --fs-h3:      clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
  --fs-lead:    clamp(1.08rem, 1rem + 0.55vw, 1.35rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-body:    1.62;

  --w-light:    300;
  --w-book:     400;
  --w-medium:   500;
  --w-semi:     600;

  /* ---- Spacing (4px base) ---- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 2.5rem;  --s-8: 3rem;
  --s-10: 4rem;    --s-12: 6rem;

  --section-y:  clamp(4.5rem, 2.5rem + 7vw, 9rem);
  --gutter:     clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --maxw:       1120px;
  --maxw-text:  680px;

  /* ---- Radii ---- */
  --r-pill:  99px;
  --r-frame: 28px;
  --r-card:  20px;
  --r-sm:    12px;
  --r-xs:    8px;

  /* ---- Elevation (awakened state) ---- */
  --shadow-rest:  0 1px 2px rgba(30, 27, 58, 0.04);
  --shadow-lift:  0 18px 40px -18px rgba(30, 27, 58, 0.16), 0 2px 6px rgba(30, 27, 58, 0.05);
  --shadow-gold:  0 14px 34px -12px rgba(180, 83, 9, 0.40);
  --shadow-frame: 0 40px 90px -40px rgba(30, 27, 58, 0.28), 0 8px 24px -12px rgba(30, 27, 58, 0.10);

  /* ---- Motion ---- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);   /* precise expo-out */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:       0.55s;
  --dur-fast:  0.22s;
  --dur-slow:  0.9s;
}