/* ═══════════════════════════════════════════════════════════════════
   🧈 FLUTTER BUTTER — DESIGN TOKENS  (Butter DS v1)
   The single source of visual truth. Every page + the Android app
   read from here. Change a value once, the whole brand follows.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand palette (carried from the original site, formalised) ── */
  --forest:       #09180B;   /* page background — the deep green-black  */
  --forest-card:  #0F1E11;   /* surface 1 — cards                       */
  --forest-mid:   #172B1A;   /* surface 2 — raised elements             */
  --forest-light: #1E3622;   /* surface 3 — hover / borders             */
  --gold:         #F5C518;   /* THE gold — signal, never wallpaper      */
  --gold-dim:     #C9A012;
  --gold-pale:    #FBE07A;
  --gold-glow:    rgba(245, 197, 24, 0.20);
  --green-hi:     #4ADE80;
  --turf:         #7DA87A;
  --turf-dim:     #4A6E47;
  --white:        #FFFFFF;
  --off-white:    #D0E8CC;
  --blue:         #60A5FA;
  --blue-dim:     #3B82F6;
  --blue-pale:    #BAD4FD;
  --blue-glow:    rgba(96, 165, 250, 0.18);
  --blue-dark:    #0A0D20;
  --purple:       #C4B5FD;
  --orange-warm:  #FDBA74;

  /* ── Semantic aliases — components use these, not raw colors ── */
  --bg:           var(--forest);
  --surface-1:    var(--forest-card);
  --surface-2:    var(--forest-mid);
  --surface-3:    var(--forest-light);
  --text:         var(--white);
  --text-soft:    var(--off-white);
  --text-dim:     var(--turf);
  --accent:       var(--gold);
  --win:          var(--green-hi);
  --loss:         #F87171;
  --push:         var(--gold-pale);
  --void:         #9CA3AF;
  --pending:      var(--blue);
  --danger:       #EF4444;
  --hairline:     rgba(245, 197, 24, 0.10);
  --hairline-hi:  rgba(245, 197, 24, 0.25);
  --scrim:        rgba(4, 12, 6, 0.72);

  /* ── Typography ── */
  --display: 'Barlow Condensed', sans-serif;
  --sans:    'Inter', sans-serif;
  --mono:    'JetBrains Mono', monospace;

  --fs-hero:    clamp(3.2rem, 8vw, 5.6rem);
  --fs-display: clamp(2.2rem, 5vw, 3.4rem);
  --fs-title:   clamp(1.5rem, 3vw, 2rem);
  --fs-lede:    clamp(1.05rem, 2vw, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  --track-caps: 0.14em;      /* letter-spacing for mono/eyebrow caps */

  /* ── Space (4px base) ── */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;

  /* ── Radius ── */
  --r-s: 6px;  --r-m: 10px;  --r-l: 16px;  --r-xl: 24px;  --r-pill: 999px;

  /* ── Elevation ── */
  --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  --shadow-2: 0 4px 12px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.30);
  --shadow-3: 0 12px 24px rgba(0,0,0,.40), 0 24px 64px rgba(0,0,0,.35);
  --shadow-gold: 0 0 0 1px var(--hairline-hi), 0 4px 24px var(--gold-glow);

  /* ── Motion ── */
  --t-fast: 150ms;
  --t-med:  220ms;
  --t-slow: 420ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Z scale ── */
  --z-nav: 100;  --z-drawer: 200;  --z-modal: 300;  --z-tour: 320;  --z-toast: 400;
}

/* Numbers are the brand: anywhere money moves, digits align. */
.tabular, .num { font-variant-numeric: tabular-nums; }
.mono    { font-family: var(--mono); }
.display { font-family: var(--display); }

/* Accessibility is part of A-grade: motion off means off. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}