:root {
  /* Colors */
  --ink: #0F1419;
  --page: #F4F6F9;
  --surface: #FFFFFF;
  --band: #E6ECFB;
  --blue: #3366FF;
  --blue-deep: #1B3A8F;
  --slate: #5A636E;
  --slate-light: #8A929C;
  --slate-lighter: #7C8797;
  --border: #E3E7EE;
  --border-light: #D3DDF2;
  --border-lighter: #C6CEDA;
  --border-lightest: #D2D9E3;

  /* Gradient glow */
  --gradient-glow: radial-gradient(60% 120% at 20% 50%, #4A7BFF 0%, transparent 70%),
                   radial-gradient(60% 120% at 55% 50%, #9B6BFF 0%, transparent 70%),
                   radial-gradient(60% 120% at 88% 50%, #FF6BA8 0%, transparent 70%);

  /* Fonts */
  --font-serif: Fraunces, serif;
  --font-sans: Inter, system-ui, -apple-system, sans-serif;
  --font-mono: JetBrains Mono, monospace;

  /* Spacing scale */
  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 16px;
  --space-lg: 22px;
  --space-xl: 24px;
  --space-2xl: 30px;
  --space-3xl: 36px;
  --space-4xl: 48px;
  --space-5xl: 52px;
  --space-6xl: 56px;
  --space-7xl: 64px;
  --space-8xl: 80px;
  --space-9xl: 100px;
  --space-10xl: 104px;

  /* Border radius */
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-md: 0 24px 60px -20px rgba(15, 20, 25, 0.35);

  /* Backdrop options (choose one) */
  --backdrop-light: rgba(15, 20, 25, 0.55);   /* --ink at 55% */
  --backdrop-medium: rgba(15, 20, 25, 0.70);  /* --ink at 70% */

  /* Max width */
  --max-width: 1120px;
}