/* ============================================================
   VARIABLES.CSS — Design tokens (CSS custom properties)
   All colours, fonts, spacing, and breakpoints live here.
   Change a value once → updates everywhere on the site.
   ============================================================ */

:root {

  /* ── Colour Palette ──────────────────────────────────────── */

  /* Base backgrounds — near-black dark theme */
  --clr-bg:          #0a0a0f;   /* Page background */
  --clr-bg-2:        #111118;   /* Slightly lighter surface */
  --clr-bg-3:        #1a1a28;   /* Card / panel surface */
  --clr-border:      #2a2a40;   /* Subtle borders */

  /* Brand red — the main accent */
  --clr-red:         #e8284a;
  --clr-red-dark:    #9b1a30;
  --clr-red-glow:    rgba(232, 40, 74, 0.18);

  /* Gold — secondary accent for highlights and prices */
  --clr-gold:        #f4c430;
  --clr-gold-dim:    rgba(244, 196, 48, 0.15);

  /* Text colours */
  --clr-text:        #e8e8f0;   /* Primary text */
  --clr-text-muted:  #8888aa;   /* Secondary / caption text */
  --clr-white:       #ffffff;

  /* Status colours */
  --clr-live:        #f4c430;   /* "LIVE" badge — gold */
  --clr-beta:        #44bb88;   /* "BETA" badge — green */


  /* ── Typography ──────────────────────────────────────────── */

  /* Display font — Bebas Neue for large headings */
  --font-display: 'Bebas Neue', 'Arial Black', sans-serif;

  /* Body font — DM Sans for readability */
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Type scale — fluid sizing using clamp(min, preferred, max) */
  --fs-xs:   clamp(0.7rem,  1.5vw, 0.8rem);
  --fs-sm:   clamp(0.85rem, 1.8vw, 0.95rem);
  --fs-base: clamp(1rem,    2vw,   1.05rem);
  --fs-md:   clamp(1.1rem,  2.2vw, 1.25rem);
  --fs-lg:   clamp(1.3rem,  2.8vw, 1.5rem);
  --fs-xl:   clamp(1.8rem,  4vw,   2.5rem);
  --fs-2xl:  clamp(2.5rem,  6vw,   4rem);
  --fs-3xl:  clamp(3.5rem,  9vw,   7rem);


  /* ── Spacing ─────────────────────────────────────────────── */

  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2.5rem;
  --space-xl:   4rem;
  --space-2xl:  6rem;
  --space-3xl:  9rem;


  /* ── Layout ──────────────────────────────────────────────── */

  --container-max:  1200px;
  --container-pad:  clamp(1.25rem, 5vw, 3rem);  /* Responsive horizontal padding */

  --nav-height:     70px;   /* Fixed nav bar height */
  --border-radius:  10px;
  --border-radius-lg: 18px;


  /* ── Transitions ─────────────────────────────────────────── */

  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 180ms var(--ease-out);
  --transition-base: 320ms var(--ease-out);
  --transition-slow: 600ms var(--ease-out);


  /* ── Shadows ─────────────────────────────────────────────── */

  --shadow-card: 0 4px 30px rgba(0,0,0,0.4);
  --shadow-red:  0 0 40px var(--clr-red-glow);
  --shadow-glow: 0 0 60px rgba(232, 40, 74, 0.25);
}