/* Design tokens. Change here once, ripples everywhere. */
:root {
  /* Brand palette ------------------------------------------------------ */
  --ink:        #06070A;       /* deep stage black */
  --ink-2:      #0E1118;       /* panel / card */
  --ink-3:      #161A23;       /* hover, raised */
  --line:       rgba(255,255,255,0.08);
  --line-2:     rgba(255,255,255,0.14);

  --mist:       #F4F5F8;       /* primary light text */
  --mist-2:     #C7CCD6;       /* secondary light text */
  --mist-3:     #8A93A4;       /* muted */

  --brand:      #2BB6FF;       /* electric blue from logo */
  --brand-deep: #1378C2;
  --brand-soft: #8FD9FF;

  --pop:        #FF1F8F;       /* hot magenta - the splash of color */
  --pop-deep:   #C90E6A;
  --pop-soft:   #FF77B6;

  --gold:       #F4C95D;       /* rare spotlight accent */
  --warn:       #FFB454;
  --good:       #43E0A0;
  --bad:        #FF5A6E;

  /* Type -------------------------------------------------------------- */
  --font-display: 'Bebas Neue', 'Oswald', 'Impact', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-hand:    'Caveat', 'Bradley Hand', cursive;

  /* Type scale - clamp() so it self-tunes from phones to 4K */
  --fs-hero:    clamp(3.6rem, 11vw, 9rem);
  --fs-h1:      clamp(2.4rem, 6vw,  5rem);
  --fs-h2:      clamp(1.8rem, 3.6vw, 3rem);
  --fs-h3:      clamp(1.3rem, 2.2vw, 1.75rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-tiny:    0.75rem;

  /* Spacing - 8px grid */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
  --s-9: 6rem;   --s-10: 8rem;

  --radius:     14px;
  --radius-sm:  8px;
  --radius-lg:  22px;

  --shadow-1:   0 1px 0 rgba(255,255,255,0.04) inset, 0 2px 8px rgba(0,0,0,.4);
  --shadow-2:   0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 50px -12px rgba(0,0,0,.7);
  --shadow-pop: 0 18px 60px -10px rgba(255, 31, 143, 0.35);
  --shadow-brand: 0 18px 60px -10px rgba(43, 182, 255, 0.35);

  --easing:    cubic-bezier(.2,.7,.2,1);
  --dur:       .25s;

  --content-max: 1200px;
  --content-pad: clamp(1rem, 4vw, 2.5rem);
}