/* ==========================================================================
   Arena design tokens v1 — dark-mode-first.
   :root = DARK (default, regardless of OS). Light applies only under
   [data-theme="light"] (user opt-in setting; never auto from prefers-color-scheme).
   Mirror: design/tokens.json (same values, Tailwind-shaped).
   Rule: components consume ROLE tokens (--bg-*, --text-*, --brand-fg …),
   never raw hues. Raw scales (--brand-300…) are for building roles only.
   ========================================================================== */

:root {
  /* --- raw scales (theme-invariant) ------------------------------------ */
  --brand-300: #FFB37A;
  --brand-400: #FF9440;
  --brand-500: #FF7A1A;   /* Arena Ignite — primary fill */
  --brand-600: #E8630A;
  --brand-700: #C24E00;

  --live-bright: #FF2D55; /* indicator/dot/decorative only */
  --live-solid:  #E11D48; /* LIVE badge bg (white text = 4.7:1 AA) */
  --live-solid-hover: #C81E41;

  --gold-hi: #FFD34D;
  --verify-solid: #1A6FD4;

  /* --- surfaces --------------------------------------------------------- */
  --bg-base: #0C0C11;
  --bg-elevated: #15151D;
  --bg-overlay: #1E1E28;
  --bg-raised: #262631;
  --bg-inverse: #F7F7F9;

  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.16);

  /* --- text -------------------------------------------------------------- */
  --text-hi: #F7F7F9;          /* 18.2:1 on base */
  --text-mid: #A9ACBB;         /* 8.7:1 on base — min for content */
  --text-placeholder: #83868F; /* 5.4:1 on base */
  --text-low: #6E7180;         /* 4.0:1 — decorative/disabled ONLY */
  --text-on-brand: #140D06;    /* on brand-500 fills = 7.4:1 */
  --text-on-solid: #FFFFFF;

  /* --- brand roles ------------------------------------------------------- */
  --brand-fg: var(--brand-500);        /* brand as text/icon/link on surfaces: 7.5:1 */
  --brand-fill: var(--brand-500);      /* filled buttons/FAB — always with --text-on-brand */
  --brand-fill-hover: var(--brand-400);
  --brand-fill-active: var(--brand-600);

  /* --- semantic roles ---------------------------------------------------- */
  --live-fg: var(--live-bright);       /* 5.4:1 on base */
  --success-fg: #4ADE80;               /* 11.2:1 */
  --success-solid: #16A34A;
  --success-on-solid: #0B1F13;
  --warning-fg: #FACC15;               /* 12.7:1 */
  --warning-solid: #FACC15;
  --warning-on-solid: #231A00;
  --danger-fg: #FF7A85;                /* 7.8:1 */
  --danger-solid: #DC2626;             /* white text = 4.8:1 */
  --danger-solid-hover: #B91C1C;
  --info-fg: #38BDF8;                  /* 9.1:1 */
  --verify-fg: #3B9EFF;                /* 7.0:1 */

  /* --- economy / gift tiers --------------------------------------------- */
  --gold: #FFC53D;                     /* 12.4:1 — economy/coins ONLY */
  --eco-violet: #A78BFA;               /* 7.2:1 */
  --eco-cyan: #22D3EE;                 /* 10.8:1 */
  --eco-magenta: #F472B6;              /* 7.4:1 */
  --gift-t1: var(--eco-cyan);
  --gift-t2: var(--brand-500);
  --gift-t3: var(--eco-violet);
  --gift-t4: var(--gold);
  --gift-t5-gradient: linear-gradient(135deg, #22D3EE 0%, #A78BFA 50%, #F472B6 100%);

  /* --- scrims ------------------------------------------------------------ */
  --scrim-top: linear-gradient(180deg, rgba(12, 12, 17, 0.72) 0%, rgba(12, 12, 17, 0) 100%);
  --scrim-bottom: linear-gradient(0deg, rgba(12, 12, 17, 0.80) 0%, rgba(12, 12, 17, 0) 100%);
  --scrim-sheet: rgba(8, 8, 12, 0.72);

  /* --- elevation (dark: surface color carries elevation; shadows subtle) - */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55);
  --glow-brand: 0 0 16px rgba(255, 122, 26, 0.35);
  --glow-live: 0 0 12px rgba(255, 45, 85, 0.45);
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--brand-400);

  /* --- type -------------------------------------------------------------- */
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;

  /* --- motion ------------------------------------------------------------ */
  --dur-press: 80ms;
  --dur-hover: 120ms;
  --dur-base: 180ms;
  --dur-enter: 240ms;
  --dur-page: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* arena-out: snappy, TikTok-feel */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);  /* overshoot — gift combos, likes */

  /* --- layout ------------------------------------------------------------ */
  --z-sticky: 10;
  --z-header: 20;
  --z-live-chrome: 30;
  --z-sheet: 40;
  --z-toast: 50;
  --z-gift-overlay: 60;
  --touch-min: 44px;
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
  --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px;
}

/* --- light theme (opt-in via user setting only) ------------------------- */
[data-theme="light"] {
  --bg-base: #F7F7FA;
  --bg-elevated: #FFFFFF;
  --bg-overlay: #FFFFFF;
  --bg-raised: #F0F0F5;
  --bg-inverse: #17171F;

  --hairline: rgba(23, 23, 31, 0.10);
  --hairline-strong: rgba(23, 23, 31, 0.18);

  --text-hi: #17171F;          /* 17.8:1 on white */
  --text-mid: #5B5E6B;         /* 6.5:1 */
  --text-placeholder: #6B7280; /* 4.8:1 on white */
  --text-low: #9A9DA8;         /* decorative/disabled only */
  /* --text-on-brand stays #140D06: brand fills keep ink text in both themes */

  --brand-fg: #B84A00;         /* 5.2:1 on white */
  /* brand fills unchanged: --brand-fill = #FF7A1A + ink text in both themes */

  --success-fg: #15803D;       /* 5.0:1 */
  --warning-fg: #92400E;       /* 7.1:1 */
  --danger-fg: #DC2626;        /* 4.8:1 */
  --info-fg: #0369A1;          /* 5.9:1 */
  --verify-fg: #1A6FD4;        /* 4.9:1 */
  --gold: #A16207;             /* 4.9:1 */
  --eco-violet: #7C3AED;       /* 5.7:1 */
  --eco-cyan: #0E7490;         /* 5.4:1 */
  --eco-magenta: #BE185D;      /* 6.0:1 */

  --scrim-top: linear-gradient(180deg, rgba(12, 12, 17, 0.72) 0%, rgba(12, 12, 17, 0) 100%);
  --scrim-bottom: linear-gradient(0deg, rgba(12, 12, 17, 0.80) 0%, rgba(12, 12, 17, 0) 100%);
  --scrim-sheet: rgba(23, 23, 31, 0.48);

  --shadow-sm: 0 1px 2px rgba(23, 23, 31, 0.08);
  --shadow-md: 0 4px 12px rgba(23, 23, 31, 0.12);
  --shadow-lg: 0 8px 24px rgba(23, 23, 31, 0.16);
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--brand-fg);
}

/* --- global motion floor ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important; /* opacity fades only, per DESIGN.md §4 */
  }
}