/* ============================================
   LATE CULTURE — Design Tokens v4 LOCKED
   White and pale rose. Nothing else.
   ============================================ */

:root {
  /* ── Colour Palette v4 ── */
  --white:  #FFFFFF;
  --cloud:  #F5F0EB;
  --rose:   #F2C4CE;
  --rose2:  #E8A0B0;
  --rose3:  #D4788A;
  --ink:    #1A1010;
  --mid:    #6A3A44;
  --lite:   #C09098;

  /* ── Border tokens ── */
  --brd:  rgba(242,196,206,.30);
  --brd2: rgba(212,120,138,.18);

  /* ── Background tokens ── */
  --bg-main: var(--cloud);
  --bg-section: var(--white);
  --separator: var(--brd);

  /* ── Glass tokens ── */
  --glass-bg-dark: rgba(12, 12, 12, 0.28);
  --glass-bg-light: rgba(255, 255, 255, 0.18);
  --glass-bg-card: rgba(255, 255, 255, 0.88);
  --glass-border-light: rgba(255, 255, 255, 0.18);
  --glass-border-dark: rgba(255, 255, 255, 0.5);
  --glass-blur: 28px;
  --glass-saturate: 2.0;

  /* ── Surface tokens ── */
  --surface-dark: var(--ink);
  --surface-elevated: #1e1e1e;

  /* ── Typography ── */
  --font-display: 'Anton', Impact, 'Haettenschweiler', 'Arial Narrow Bold', 'Arial Black', sans-serif;
  --font-editorial: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, monospace;
  --font-handwrite: 'Indie Flower', 'Bradley Hand', 'Segoe Script', cursive;
  --font-marker: 'Permanent Marker', 'Marker Felt', cursive;
  --font-logo: Impact, 'Arial Black', sans-serif;

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

  /* ── Radius ── */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 20px 60px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-glass: 0 4px 24px rgba(0, 0, 0, 0.15);
  --shadow-glass-sm: 0 2px 12px rgba(0, 0, 0, 0.08);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 600ms;

  /* ── Layout ── */
  --max-width: 1320px;
  --nav-height: 52px;
  --section-padding: 120px;
}

@media (max-width: 768px) {
  :root {
    --section-padding: 80px;
    --space-3xl: 56px;
    --space-4xl: 80px;
  }
}