/* =========================================================
   Bet Your Bud — Design Tokens (Royal Badge Theme)
   File: /assets/css/tokens.css
   Purpose: Single source of truth for colors, type, spacing,
            radii, shadows, motion, and z-index.
   Notes:
   - Updated to match the Bet Your Bud logo: navy + gold + trophy depth.
   - Keeps existing token names for compatibility with current CSS.
   ========================================================= */

:root{
  /* ---------- Brand / Core Colors ---------- */
  /* Backgrounds */
  --c-bg: #0B1220;                 /* Royal navy (base) */
  --c-bg-2: #0E1730;               /* Slightly brighter navy */
  --c-surface: rgba(255,255,255,0.06);
  --c-surface-2: rgba(255,255,255,0.09);

  /* Borders */
  --c-border: rgba(255,255,255,0.12);
  --c-border-2: rgba(255,255,255,0.18);
  --c-border-gold: rgba(245,200,76,0.32);

  /* Text */
  --c-text: rgba(255,255,255,0.92);
  --c-text-2: rgba(255,255,255,0.74);
  --c-text-3: rgba(255,255,255,0.56);

  /* Brand accents (mapped for compatibility) */
  --c-primary: #F5C84C;            /* Gold (primary CTA/highlights) */
  --c-primary-2: #D9A93A;          /* Warm gold (depth/hover) */
  --c-accent: #4DA3FF;             /* Electric blue (secondary accent) */

  /* Status */
  --c-warn: #FFB020;
  --c-danger: #E24C4C;
  --c-success: #4CAF50;

  /* Additional brand helpers (optional usage) */
  --c-royal: #1B2A4A;              /* Deep blue surface */
  --c-royal-2: #22365F;            /* Elevated surface */
  --c-ink: #07101E;                /* Darkest ink */
  --c-white: #FFFFFF;

  /* For light theme mapping (overridden in themes.css) */
  --c-bg-light: #F7F8FC;
  --c-text-light: #101828;

  /* ---------- Gradients ---------- */
  /* Gold brand gradient */
  --g-brand: linear-gradient(90deg, #F8D36A 0%, #F5C84C 35%, #D9A93A 100%);
  --g-brand-soft: linear-gradient(90deg, rgba(245,200,76,0.26), rgba(77,163,255,0.18));

  /* Blue accent gradient */
  --g-accent: linear-gradient(90deg, #4DA3FF 0%, #7CC4FF 55%, #A6D9FF 100%);

  /* Background hero gradients */
  --g-hero: radial-gradient(900px 420px at 30% 18%, rgba(77,163,255,0.22), rgba(77,163,255,0) 60%),
            radial-gradient(740px 380px at 78% 22%, rgba(245,200,76,0.18), rgba(245,200,76,0) 62%),
            linear-gradient(180deg, #0B1220 0%, #0E1730 60%, #0B1220 100%);

  /* Glows */
  --g-glow: radial-gradient(closest-side, rgba(245,200,76,0.32), rgba(245,200,76,0.0) 70%);
  --g-glow-2: radial-gradient(closest-side, rgba(77,163,255,0.24), rgba(77,163,255,0.0) 72%);

  /* ---------- Typography ---------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --font-display: "Faktum", "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  --fs-11: 0.6875rem; /* 11px */
  --fs-12: 0.75rem;   /* 12px */
  --fs-13: 0.8125rem; /* 13px */
  --fs-14: 0.875rem;  /* 14px */
  --fs-16: 1rem;      /* 16px */
  --fs-18: 1.125rem;  /* 18px */
  --fs-20: 1.25rem;   /* 20px */
  --fs-24: 1.5rem;    /* 24px */
  --fs-28: 1.75rem;   /* 28px */
  --fs-32: 2rem;      /* 32px */
  --fs-40: 2.5rem;    /* 40px */
  --fs-48: 3rem;      /* 48px */
  --fs-56: 3.5rem;    /* 56px */

  --lh-tight: 1.08;
  --lh-snug: 1.22;
  --lh-normal: 1.45;
  --lh-relaxed: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-tight: -0.02em;
  --ls-normal: 0em;

  /* ---------- Spacing (8px system + small steps) ---------- */
  --sp-2: 0.125rem;  /* 2px */
  --sp-4: 0.25rem;   /* 4px */
  --sp-6: 0.375rem;  /* 6px */
  --sp-8: 0.5rem;    /* 8px */
  --sp-10: 0.625rem; /* 10px */
  --sp-12: 0.75rem;  /* 12px */
  --sp-14: 0.875rem; /* 14px */
  --sp-16: 1rem;     /* 16px */
  --sp-20: 1.25rem;  /* 20px */
  --sp-24: 1.5rem;   /* 24px */
  --sp-28: 1.75rem;  /* 28px */
  --sp-32: 2rem;     /* 32px */
  --sp-40: 2.5rem;   /* 40px */
  --sp-48: 3rem;     /* 48px */
  --sp-56: 3.5rem;   /* 56px */
  --sp-64: 4rem;     /* 64px */
  --sp-72: 4.5rem;   /* 72px */
  --sp-80: 5rem;     /* 80px */

  /* ---------- Radii ---------- */
  --r-10: 10px;
  --r-12: 12px;
  --r-16: 16px;
  --r-20: 20px;
  --r-24: 24px;
  --r-28: 28px;
  --r-pill: 999px;

  /* ---------- Borders ---------- */
  --bw-1: 1px;
  --bw-2: 2px;

  /* ---------- Shadows ---------- */
  --sh-xs: 0 1px 0 rgba(255,255,255,0.04);
  --sh-sm: 0 10px 26px rgba(0,0,0,0.38);
  --sh-md: 0 20px 56px rgba(0,0,0,0.48);
  --sh-lg: 0 34px 92px rgba(0,0,0,0.58);

  /* Premium “trophy” glows (use sparingly) */
  --sh-glow: 0 0 0 1px rgba(245,200,76,0.18), 0 14px 46px rgba(245,200,76,0.16);
  --sh-glow-2: 0 0 0 1px rgba(77,163,255,0.18), 0 16px 54px rgba(77,163,255,0.16);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-in: cubic-bezier(.64,0,.78,0);
  --ease-smooth: cubic-bezier(.2,.8,.2,1);

  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --dur-4: 420ms;
  --dur-5: 700ms;

  /* ---------- Layout Tokens ---------- */
  --container-max: 1120px;
  --container-pad: 20px;

  --header-h: 72px;

  /* Responsive breakpoints (used in CSS as comments/reference) */
  /* sm: 640px, md: 768px, lg: 1024px, xl: 1280px */

  /* ---------- Z-index ---------- */
  --z-bg: -1;
  --z-base: 1;
  --z-header: 50;
  --z-overlay: 80;
  --z-modal: 100;

  /* ---------- Effects ---------- */
  --blur-1: 10px;
  --blur-2: 18px;

  /* Focus rings */
  --ring: 0 0 0 2px rgba(245,200,76,0.22), 0 0 0 6px rgba(77,163,255,0.14);
  --ring-strong: 0 0 0 2px rgba(245,200,76,0.34), 0 0 0 8px rgba(77,163,255,0.18);

  /* ---------- Component Defaults ---------- */
  --btn-h: 44px;
  --btn-h-lg: 52px;
  --btn-pad-x: 16px;
  --btn-pad-x-lg: 18px;

  --card-pad: 18px;
  --card-pad-lg: 22px;

  /* ---------- System ---------- */
  color-scheme: dark;
}

/* Respect reduced motion by shifting durations to near-zero (actual overrides in animations.css) */
@media (prefers-reduced-motion: reduce){
  :root{
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
    --dur-5: 1ms;
  }
}