:root {
  /* ── Colours ── */
  --color-bg:         #111118;
  --color-surface:    #1c1c26;
  --color-aqua:       #00ffe7;
  --color-blue:       #4f8ef7;
  --color-violet:     #9b59f5;
  --color-fuchsia:    #f000b8;
  --color-fg:         #e8f4ff;

  /* ── Semantic ── */
  --color-body:       rgba(232, 244, 255, 0.55);
  --color-body-strong: rgba(232, 244, 255, 0.65);
  --color-muted:      rgba(232, 244, 255, 0.5);
  --color-border:     rgba(255, 255, 255, 0.07);
  --color-border-blue: rgba(79, 142, 247, 0.3);

  /* ── Gradients ── */
  --gradient-brand: linear-gradient(135deg, #00ffe7, #4f8ef7, #9b59f5, #f000b8);
  --gradient-logo:  linear-gradient(135deg, #00ffe7, #4f8ef7, #9b59f5);
  --gradient-divider: linear-gradient(90deg, transparent, #00ffe7, #4f8ef7, #9b59f5, #f000b8, transparent);

  /* ── Typography ── */
  --font-heading: 'Exo 2', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* ── Font sizes ── */
  --text-display:  clamp(44px, 6vw, 68px);
  --text-h2:       clamp(28px, 4vw, 42px);
  --text-h3:       clamp(16px, 2vw, 22px);
  --text-body:     16px;
  --text-small:    13px;
  --text-eyebrow:  11px;

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

  /* ── Layout ── */
  --container:     1200px;
  --container-pad: clamp(24px, 5vw, 48px);

  /* ── Borders ── */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* ── Transitions ── */
  --transition: 0.2s ease;
  --transition-slow: 0.4s ease;

  /* ── Nav ── */
  --nav-height: 68px;
}