:root {
  /* Brand */
  --violet: #7049f5;
  --violet-soft: rgba(112, 73, 245, 0.18);
  --violet-border: rgba(112, 73, 245, 0.7);

  /* Neutrals */
  --black: #000000;
  --white: #ffffff;
  --gray-900: #0e1311;
  --gray-700: #2a2a2a;
  --gray-500: #505050;
  --gray-300: #b8b8b8;
  --gray-100: #f8f8f8;

  /* Surface (over video) */
  --surface-glass: rgba(255, 255, 255, 0.06);
  --surface-glass-strong: rgba(255, 255, 255, 0.1);
  --surface-dark: rgba(0, 0, 0, 0.24);
  --hairline: rgba(255, 255, 255, 0.14);
  --hairline-strong: rgba(255, 255, 255, 0.32);

  /* Text on dark */
  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255, 255, 255, 0.7);
  --text-on-dark-subtle: rgba(255, 255, 255, 0.45);

  /* Type */
  --font-display: 'Fustat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui: 'Schibsted Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 44px;
  --space-8: 60px;
  --space-9: 80px;
  --space-10: 120px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Layout */
  --nav-padding-x: var(--space-10);
  --nav-padding-y: var(--space-4);
  --content-max: 900px;
}

@media (max-width: 1100px) {
  :root {
    --nav-padding-x: var(--space-6);
  }
}

@media (max-width: 640px) {
  :root {
    --nav-padding-x: var(--space-5);
  }
}