/* ===========================================================
   BOULDERBOOK // DESIGN TOKENS
   Derived from DESIGN_SYSTEM_RETRO.md — 80s/90s Memphis + neon
   =========================================================== */

:root {
  /* --- Core palette --- */
  --pink: #ef4b89;
  --pink-dark: #c93d6e;
  --pink-light: #ff7bad;
  --yellow: #ffe367;
  --yellow-dark: #e6cc5a;
  --cyan: #00ffff;
  --purple: #a855f7;
  --orange: #ff6b35;
  --green: #3ddc84;

  --dark: #313230;
  --dark-deep: #1a1a1a;
  --dark-light: #4a4948;
  --dark-lighter: #636261;
  --white: #f5f5f5;
  --muted: #a3a19e;

  /* --- Surfaces --- */
  --bg: var(--dark);
  --surface: #3a3b38;
  --surface-high: var(--dark-light);
  --ink: var(--white);

  /* --- Type --- */
  --font-display: 'Lexend Mega', 'Arial Black', 'Haettenschweiler', Impact, sans-serif;
  --font-heading: 'Outfit', 'Arial Black', Impact, sans-serif;
  --font-body: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  --text-4xl: clamp(2rem, 1.3rem + 3vw, 3.2rem);
  --text-hero: clamp(1.9rem, 0.6rem + 6vw, 6.2rem);

  /* --- Spacing --- */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;
  --s20: 5rem;
  --section: clamp(3.5rem, 2rem + 4.5vw, 6.5rem);

  /* --- Borders & radius --- */
  --bw-thin: 2px;
  --bw: 3px;
  --bw-thick: 4px;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* --- Hard (neubrutalist) shadows --- */
  --sh-sm: 2px 2px 0 var(--pink);
  --sh-md: 5px 5px 0 var(--pink);
  --sh-lg: 8px 8px 0 var(--pink);
  --sh-y-md: 5px 5px 0 var(--yellow);
  --sh-y-lg: 8px 8px 0 var(--yellow);
  --sh-c-md: 5px 5px 0 var(--cyan);
  --sh-black: 6px 6px 0 var(--dark-deep);

  /* --- Neon glows --- */
  --glow-pink: 0 0 22px rgba(239, 75, 137, 0.55);
  --glow-yellow: 0 0 22px rgba(255, 227, 103, 0.5);
  --glow-cyan: 0 0 22px rgba(0, 255, 255, 0.45);

  /* --- Motion --- */
  --fast: 150ms;
  --base: 250ms;
  --slow: 380ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* --- Layout --- */
  --container: 1220px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
}

/* CRT effect can be switched off from the menu bar. */
:root[data-crt='off'] .crt,
:root[data-crt='off'] .grain {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}