/* ════════════════════════════════════════════
   DESIGN TOKENS
════════════════════════════════════════════ */
:root {
  /* Brand */
  --yellow:       #FFD100;
  --yellow-dim:   #C9A300;
  --yellow-glow:  rgba(255, 209, 0, 0.25);
  --blue:         #003399;
  --blue-light:   #0044CC;
  --blue-glow:    rgba(0, 51, 153, 0.4);

  /* Neutral */
  --white:        #FFFFFF;
  --off-white:    #F0F0F0;
  --gray:         #8888AA;
  --gray-dim:     rgba(136, 136, 170, 0.5);

  /* Surfaces */
  --dark:         #08080F;
  --dark2:        #0F0F1A;
  --dark3:        #161625;

  /* Glass */
  --card-bg:      rgba(255, 255, 255, 0.04);
  --card-border:  rgba(255, 255, 255, 0.08);

  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Spacing scale */
  --sp-xs:  0.5rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2rem;
  --sp-xl:  3rem;
  --sp-2xl: 4rem;
  --sp-3xl: 6rem;

  /* Radius */
  --r-sm:  8px;
  --r-md:  16px;
  --r-lg:  20px;
  --r-pill: 999px;

  /* Transitions */
  --ease-out:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:  0.2s;
  --t-base:  0.3s;
  --t-slow:  0.6s;
  --t-xslow: 0.9s;

  /* Layout */
  --max-width: 1100px;
}