/* ==========================================================================
   YANO STARS — DESIGN TOKENS
   Single source of truth for color, type, spacing, motion.
   Every page in the platform (public site, dashboard, admin, judge portal)
   imports this file first.
   ========================================================================== */

:root {
  /* ---- Brand color palette (from brand book) ---- */
  --y-black:        #0A0A0A;   /* Midnight Black */
  --y-black-soft:   #121212;
  --y-black-raised: #1A1A1A;
  --y-black-card:   #161616;
  --y-gold:         #FFC107;   /* Electric Gold */
  --y-gold-bright:  #FFD84D;
  --y-gold-deep:    #C8930A;
  --y-white:        #FFFFFF;   /* Pure White */
  --y-orange:       #FF6A00;   /* Amapiano Orange */
  --y-cyan:         #00E5FF;   /* Neon Cyan (accent) */
  --y-grey:         #7A7A7A;   /* Steel Grey */
  --y-grey-soft:    #B8B8B8;

  /* ---- Gradients ---- */
  --grad-gold:      linear-gradient(135deg, #FFE07A 0%, #FFC107 45%, #C8930A 100%);
  --grad-fire:      linear-gradient(135deg, var(--y-gold) 0%, var(--y-orange) 100%);
  --grad-dark:      linear-gradient(180deg, rgba(10,10,10,0) 0%, #0A0A0A 100%);
  --grad-dark-top:  linear-gradient(0deg, rgba(10,10,10,0) 0%, #0A0A0A 100%);
  --grad-radial-glow: radial-gradient(circle at 50% 50%, rgba(255,193,7,0.25) 0%, rgba(255,193,7,0) 70%);

  /* ---- Surfaces / text (semantic) ---- */
  --bg:             var(--y-black);
  --bg-raised:      var(--y-black-raised);
  --bg-card:        var(--y-black-card);
  --border-subtle:  rgba(255,255,255,0.08);
  --border-gold:    rgba(255,193,7,0.35);
  --text-primary:   var(--y-white);
  --text-secondary: var(--y-grey-soft);
  --text-muted:     var(--y-grey);
  --text-gold:      var(--y-gold);

  /* ---- Typography ---- */
  --font-display: 'Bebas Neue', 'Anton', Impact, sans-serif;   /* headlines */
  --font-heading: 'Anton', 'Bebas Neue', Impact, sans-serif;   /* subheads */
  --font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-hero:      clamp(3.2rem, 10vw, 9rem);
  --fs-h1:        clamp(2.4rem, 6vw, 5rem);
  --fs-h2:        clamp(2rem, 4.5vw, 3.4rem);
  --fs-h3:        clamp(1.4rem, 3vw, 2rem);
  --fs-lead:      clamp(1.1rem, 2vw, 1.4rem);
  --fs-body:      1rem;
  --fs-small:     0.85rem;
  --fs-micro:     0.72rem;

  --lh-tight: 1.02;
  --lh-snug:  1.2;
  --lh-body:  1.6;

  --ls-tight: -0.01em;
  --ls-wide:  0.14em;
  --ls-wider: 0.28em;

  /* ---- Spacing scale ---- */
  --sp-2xs: 0.4rem;
  --sp-xs:  0.8rem;
  --sp-sm:  1.2rem;
  --sp-md:  2rem;
  --sp-lg:  3.2rem;
  --sp-xl:  5rem;
  --sp-2xl: 8rem;
  --sp-3xl: 11rem;

  --container-max: 1360px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ---- Shadow / glow ---- */
  --shadow-card:     0 20px 60px -20px rgba(0,0,0,0.7);
  --glow-gold-sm:    0 0 20px rgba(255,193,7,0.35);
  --glow-gold-md:    0 0 40px rgba(255,193,7,0.4), 0 0 90px rgba(255,193,7,0.15);
  --glow-gold-lg:    0 0 80px rgba(255,193,7,0.45), 0 0 160px rgba(255,106,0,0.2);
  --glow-cyan-sm:    0 0 20px rgba(0,229,255,0.35);

  /* ---- Motion ---- */
  --ease-out:      cubic-bezier(.16,1,.3,1);
  --ease-in-out:   cubic-bezier(.65,0,.35,1);
  --ease-spring:   cubic-bezier(.34,1.56,.64,1);
  --dur-fast:      180ms;
  --dur-base:      420ms;
  --dur-slow:      800ms;

  /* ---- Z-index scale ---- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-cursor: 500;
}