/* ==============================================
   DESIGN TOKENS — boobies.in
   The visual DNA of the brand.
============================================== */

:root {
  /* ── Brand Colors ────────────────────────── */
  --yellow:       #FFE500;
  --yellow-dim:   #E6CE00;
  --yellow-ghost: rgba(255, 229, 0, 0.08);
  --black:        #0A0A0A;
  --black-mid:    #161616;
  --black-soft:   #1F1F1F;
  --pink:         #FF2D78;
  --pink-dark:    #D4004F;
  --pink-ghost:   rgba(255, 45, 120, 0.12);
  --white:        #FAFAFA;
  --white-dim:    rgba(250, 250, 250, 0.6);
  --white-ghost:  rgba(250, 250, 250, 0.08);

  /* ── Typography ──────────────────────────── */
  --font-display: 'Bebas Neue', sans-serif;
  --font-ui:      'Space Grotesk', sans-serif;
  --font-body:    'IBM Plex Mono', monospace;

  /* ── Spacing Scale ───────────────────────── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  100px;

  /* ── Border ──────────────────────────────── */
  --border-thin:   2px solid var(--black);
  --border-thick:  3px solid var(--black);
  --border-pink:   2px solid var(--pink);
  --border-yellow: 2px solid var(--yellow);

  /* ── Shadows ─────────────────────────────── */
  --shadow-brutal:      4px 4px 0 var(--black);
  --shadow-brutal-pink: 4px 4px 0 var(--pink);
  --shadow-brutal-lg:   8px 8px 0 var(--black);
  --shadow-brutal-xl:   12px 12px 0 var(--black);

  /* ── Transitions ─────────────────────────── */
  --ease-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    0.18s;
  --dur-mid:     0.3s;
  --dur-slow:    0.5s;
}