/* ============================================================
   DESIGN TOKENS
   Single source of truth for all visual variables.

   TO EDIT:
   - Accent color     → --accent
   - Background       → --black
   - Border radius    → --radius
   - Fonts            → --font-display, --font-body
   - Spacing          → --space-*
   - Background canvas → src/components/background/background.js (BG_CONFIG)
   ============================================================ */

:root {
  /* ── Colors ── */
  --accent:      #CCFF00;
  --black:       #000000;
  --white:       #FFFFFF;
  --gray:        #888888;
  --gray-dark:   #1a1a1a;
  --gray-mid:    #333333;

  /* ── Typography ── */
  --font-display: 'IBM Plex Sans', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* ── Radius ── */
  --radius:      4px;

  /* ── Spacing ── */
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-20: 80px;
  --space-24: 96px;
  --space-36: 140px;

  /* ── Layout ── */
  --section-pad-x: 60px;
  --section-pad-y: 140px;

  /* ── Z-index ── */
  --z-bg:      0;
  --z-content: 1;
  --z-nav:     100;
  --z-cursor:  9998;
}

@media (max-width: 900px) {
  :root {
    --section-pad-x: 28px;
    --section-pad-y: 80px;
  }
}