/* ==========================================================================
   PLAY IT AGAIN MC — DESIGN TOKENS  (v1.0.1)
   "Replay the culture" — retro-future neon music label
   Import this FIRST: <link rel="stylesheet" href="/assets/css/tokens.css">
   ========================================================================== */

:root {
  /* ---- 1. COLOR · base surfaces ------------------------------------------ */
  --bg-0:        #0A0B14;   /* page background (deep-space indigo)            */
  --bg-1:        #0E1020;   /* alt section background                          */
  --card:        #12142B;   /* card surface                                    */
  --card-2:      #171A38;   /* raised / hover card surface                     */
  --line:        rgba(155,160,195,.16);  /* hairline borders                   */
  --line-strong: rgba(155,160,195,.32);

  /* ---- 2. COLOR · neon brand --------------------------------------------- */
  --violet:      #7C3AED;
  --cyan:        #22D3EE;
  --magenta:     #F0327B;
  --lime:        #B6F09C;

  /* soft translucent tints (glass fills, chip bg) */
  --violet-a:    rgba(124,58,237,.16);
  --cyan-a:      rgba(34,211,238,.14);
  --magenta-a:   rgba(240,50,123,.16);
  --lime-a:      rgba(182,240,156,.14);

  /* ---- 3. COLOR · text ---------------------------------------------------- */
  --text:        #F4F5FB;
  --muted:       #9BA0C3;
  --text-dim:    #6E7394;

  /* ---- 4. COLOR · semantic ------------------------------------------------ */
  --ok:          #34D399;
  --warn:        #FBBF24;
  --danger:      #FB4D6D;
  --info:        #22D3EE;

  /* ---- 5. GRADIENTS -------------------------------------------------------- */
  --grad-neon:   linear-gradient(135deg,#22D3EE 0%,#7C3AED 55%,#F0327B 100%);
  --grad-neon-soft: linear-gradient(135deg,rgba(34,211,238,.18),rgba(124,58,237,.22),rgba(240,50,123,.18));
  --grad-hot:    linear-gradient(90deg,#F0327B,#7C3AED);
  --grad-cool:   linear-gradient(90deg,#22D3EE,#7C3AED);
  --grad-hero: radial-gradient(1100px 620px at 82% -10%, rgba(124,58,237,.38), transparent 60%),
               radial-gradient(900px 560px at -12% 30%, rgba(34,211,238,.22), transparent 55%),
               radial-gradient(760px 520px at 55% 115%, rgba(240,50,123,.20), transparent 60%),
               var(--bg-0);

  /* ---- 6. GLASSMORPHISM ---------------------------------------------------- */
  --glass-bg:    rgba(18,20,43,.72);
  --glass-bg-2:  rgba(23,26,56,.60);
  --glass-blur:  14px;
  --glass-border: 1px solid rgba(155,160,195,.16);

  /* ---- 7. GLOWS ------------------------------------------------------------ */
  --glow-cyan:   0 0 22px rgba(34,211,238,.35);
  --glow-violet: 0 0 26px rgba(124,58,237,.45);
  --glow-magenta:0 0 22px rgba(240,50,123,.40);
  --glow-cta:    0 0 0 0 rgba(124,58,237,.55);
  --shadow-card: 0 10px 34px rgba(2,3,12,.55);

  /* ---- 8. TYPE ------------------------------------------------------------- */
  --font-display:'Unbounded', 'Inter', system-ui, sans-serif;
  --font-body:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs:   .72rem;      /* 11.5px kickers, labels   */
  --fs-sm:   .84rem;      /* small meta               */
  --fs-base: .975rem;     /* 15.6px body              */
  --fs-md:   1.1rem;
  --fs-lg:   clamp(1.25rem, .9rem + 1.2vw, 1.6rem);
  --fs-xl:   clamp(1.7rem, 1.1rem + 2.4vw, 2.6rem);
  --fs-2xl:  clamp(2.2rem, 1.4rem + 3.6vw, 3.9rem);
  --fs-hero: clamp(2.6rem, 1.6rem + 5vw, 5.2rem);
  --lh-tight: 1.08;
  --lh-body:  1.62;
  --ls-wide:  .18em;      /* uppercase kickers        */
  --ls-wider: .3em;

  /* ---- 9. SPACING (4px scale) ---------------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-9: 6rem;
  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* ---- 10. RADII ------------------------------------------------------------ */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ---- 11. MOTION ------------------------------------------------------------ */
  --e-out:  cubic-bezier(.16,1,.3,1);      /* snap-out easing (reveals)  */
  --e-inout:cubic-bezier(.65,0,.35,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1); /* playful pop                */
  --t-fast:  140ms;
  --t-med:   320ms;
  --t-slow:  640ms;

  /* ---- 12. Z-INDEX ------------------------------------------------------------ */
  --z-bg: -1; --z-content: 1; --z-sticky: 50; --z-nav: 60; --z-player: 80;
  --z-chat: 90; --z-modal: 100; --z-toast: 110;

  /* ---- 13. MISC ---------------------------------------------------------------- */
  --player-h: 76px;                 /* reserve space above sticky player */
  --grain-opacity: .05;
  --focus-ring: 0 0 0 3px rgba(34,211,238,.45);
}

/* Dark-only theme: keep form controls native-dark */
:root { color-scheme: dark; }