/* ==========================================================================
   PIX — DESIGN TOKENS
   The single source of truth for the PIX website.
   Derived from "PIX Brand Guidelines v1.0 · MySportsPix Ltd".

   Rules baked in:
   - Dark background ALWAYS. Never pure black (#000), never pure-white bg.
   - Purple = signature brand. Gold = the single most important CTA.
   - Green = live/positive. Red = urgency only, sparingly.
   - Type is Barlow Condensed (loud) + Barlow (readable). No other fonts.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. BRAND COLOURS  (the five that carry the brand)
     ---------------------------------------------------------------------- */
  --pix-black:  #161616;   /* default background for everything */
  --pix-purple: #7B3FE4;   /* hero colour — logo, highlights, brand moments */
  --pix-gold:   #F5A623;   /* energy, winning, primary CTAs */
  --pix-green:  #22C55E;   /* live states, positive, success */
  --pix-red:    #DC2626;   /* urgency only — countdowns, last chance */

  /* Interaction shades derived from the brand (hover / active / focus).
     Kept as tokens so components never hard-code a one-off colour. */
  --pix-purple-strong: #6A2FD0;  /* purple hover/active */
  --pix-purple-soft:   #9B6FF0;  /* purple on dark surfaces, links */
  --pix-gold-strong:   #E0951A;  /* gold hover/active */
  --pix-green-strong:  #1BA34C;
  --pix-red-strong:    #B91C1C;

  /* ----------------------------------------------------------------------
     2. SURFACES & NEUTRALS  (what makes it feel premium, not flat)
     ---------------------------------------------------------------------- */
  --surface-bg:      var(--pix-black); /* page background */
  --surface-card:    #242424;          /* cards & panels on top of bg */
  --surface-raised:  #2D2D2D;          /* selected / hover / raised */
  --purple-deep:     #2A1A5E;          /* gradient washes, avatars */

  --text:        #FFFFFF;  /* primary text & titles */
  --text-muted:  #A1A1AA;  /* secondary text, descriptions */
  --text-faint:  #6B7280;  /* tertiary — timestamps, fine print */
  --text-on-gold:  var(--pix-black); /* black text on gold = "hype" treatment */
  --text-on-purple:#FFFFFF;

  /* Hairline borders & dividers — white at low alpha reads better than grey */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border:        rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.20);

  /* ----------------------------------------------------------------------
     3. GRADIENTS & WASHES
     ---------------------------------------------------------------------- */
  --grad-brand:  linear-gradient(135deg, var(--pix-purple) 0%, var(--purple-deep) 100%);
  --grad-gold:   linear-gradient(135deg, #FFC15E 0%, var(--pix-gold) 100%);
  --grad-surface:linear-gradient(180deg, var(--surface-card) 0%, var(--pix-black) 100%);
  /* Subtle radial glow used behind the hero wordmark */
  --wash-hero:   radial-gradient(60% 60% at 50% 0%, rgba(123,63,228,0.28) 0%, rgba(22,22,22,0) 70%);

  /* ----------------------------------------------------------------------
     4. TIER COLOURS  (functional — PIX Draft T1–T6, always exact)
     ---------------------------------------------------------------------- */
  --tier-1: #C8A84B;  /* Gold — elite / superstars   */
  --tier-2: #9B6FF0;  /* Purple — top contenders     */
  --tier-3: #22C55E;  /* Green — solid mid-tier      */
  --tier-4: #38BDF8;  /* Blue — outsiders            */
  --tier-5: #FB923C;  /* Orange — long shots         */
  --tier-6: #6B7280;  /* Grey — wildcards & legends  */

  /* ----------------------------------------------------------------------
     5. GAME-MODE ACCENTS  (lead content with the mode's colour)
     ---------------------------------------------------------------------- */
  --mode-title-race: #38BDF8;  /* TR — season-long table prediction  (Blue)   */
  --mode-puzzle:     #F5A623;  /* P7 — Puzzle PIX, ball knowledge    (Gold)   */
  --mode-gridgame:   #7B3FE4;  /* GG — live match prediction         (Purple) */
  --mode-draft:      #22C55E;  /* PD — fantasy pack drafting         (Green)  */

  /* Economy accents */
  --pixels:  var(--pix-purple);  /* the in-app currency coin */
  --streak:  #FB923C;            /* the daily flame */

  /* ----------------------------------------------------------------------
     6. TYPOGRAPHY
     ---------------------------------------------------------------------- */
  --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fw-black:   900;  /* titles */
  --fw-extra:   800;  /* subtitles */
  --fw-bold:    700;  /* labels & body emphasis */
  --fw-regular: 400;  /* body */

  /* Fluid type scale — clamp(min, preferred, max). Mobile → desktop.
     Display sizes ride the condensed font; body sizes ride Barlow. */
  --fs-hero:     clamp(3.5rem, 9vw, 7.5rem);   /* "PLAY PIX" hero wordmark   */
  --fs-display:  clamp(2.75rem, 6vw, 5rem);    /* big section headlines      */
  --fs-title:    clamp(2rem, 4.2vw, 3.25rem);  /* section titles             */
  --fs-h2:       clamp(1.6rem, 3vw, 2.25rem);
  --fs-h3:       clamp(1.25rem, 2vw, 1.5rem);
  --fs-subtitle: clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body-lg:  clamp(1.075rem, 1.4vw, 1.25rem);
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --fs-eyebrow:  0.8125rem;   /* uppercase tracked label */

  --lh-tight:   0.95;  /* condensed display — packs tightly */
  --lh-snug:    1.1;
  --lh-normal:  1.5;   /* body copy readability */
  --lh-relaxed: 1.65;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.16em;  /* uppercase eyebrows / labels */

  /* ----------------------------------------------------------------------
     7. SPACING  (4px base — used for padding, gaps, section rhythm)
     ---------------------------------------------------------------------- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */
  /* Vertical rhythm between full-page sections (fluid) */
  --section-y: clamp(4rem, 10vw, 8rem);

  /* ----------------------------------------------------------------------
     8. RADII
     ---------------------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------------------
     9. ELEVATION & GLOW
     ---------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  /* Signature glows — used sparingly on the hero CTA & brand moments */
  --glow-purple: 0 0 0 1px rgba(123,63,228,0.4), 0 12px 40px rgba(123,63,228,0.35);
  --glow-gold:   0 12px 40px rgba(245,166,35,0.35);

  /* ---------------------------------------------------------------------
     10. LAYOUT
     ---------------------------------------------------------------------- */
  --container:        1120px;  /* default max content width */
  --container-narrow: 760px;   /* prose / focused sections */
  --gutter:           clamp(1.25rem, 5vw, 3rem);

  /* ----------------------------------------------------------------------
     11. MOTION  (confident, quick — never sluggish)
     ---------------------------------------------------------------------- */
  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  400ms;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);   /* easeOutExpo-ish */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ----------------------------------------------------------------------
     12. FOCUS & Z-INDEX
     ---------------------------------------------------------------------- */
  --focus-ring: 0 0 0 3px rgba(155,111,240,0.6);

  --z-base:    0;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}