:root {
  /* Colors — charcoal ground + cobalt-blue accent.
     Palette inspired by Brivon's ink/paper scale, swapped from lime to blue. */
  --color-bg: #0A0A0C;
  --color-bg-elevated: #18181C;
  --color-surface: rgba(244, 244, 240, 0.04);
  --color-surface-hover: rgba(244, 244, 240, 0.08);
  --color-border: rgba(244, 244, 240, 0.1);
  --color-text-primary: #F4F4F0;
  --color-text-secondary: #C9C9C2;
  --color-text-muted: #80807A;

  --color-accent: #3457FF;
  --color-accent-hover: #2846E0;
  --color-accent-soft: rgba(52, 87, 255, 0.16);
  --color-cyan: #5B7CFF;
  --color-success: #3b82f6;
  --color-error: #f87171;
  --color-warning: #fbbf24;

  --gradient-hero: linear-gradient(135deg, rgba(52, 87, 255, 0.25), rgba(91, 124, 255, 0.1));
  --gradient-card: linear-gradient(160deg, rgba(52, 87, 255, 0.14), rgba(10, 10, 12, 0.4));

  /* Typography — bold display font + monospace labels, both from Google Fonts */
  --font-primary: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Boldonse', 'Inter Tight', system-ui, sans-serif;
  --font-accent: 'Boldonse', 'Inter Tight', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
  --fs-4xl: 3.5rem;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radii + shadows */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-glow: 0 0 40px rgba(52, 87, 255, 0.3);
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.45);

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  --blur-glass: blur(16px);
}