:root {
  /* Typography */
  --font-sans: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Color tokens inspired by design.json */
  --color-bg: #ffffff;
  --color-surface: #f9f9fb;
  --color-lavender: #f2dafc;
  --color-lilac: #d0b8ff;
  --color-peach: #ff9c64;
  --color-yellow: #ffd858;
  --color-rose: #ff7e86;
  --color-mist: #c6f6f4;
  --color-text: #08090a;
  --color-text-muted: #6e6e6e;
  --color-text-soft: #a09fb0;
  --color-pill: #f1f2ff;
  --color-border: #ecebf6;
  --color-shadow: rgba(20, 16, 34, 0.12);
  --focus-ring: #111;

  /* Layout */
  --container-width: 1200px;
  --radius-lg: 32px;
  --radius-md: 20px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Shadows */
  --shadow-card: 0 24px 50px rgba(20, 16, 34, 0.12);
  --shadow-chip: 0 12px 24px rgba(20, 16, 34, 0.1);
  --shadow-floating: 0 20px 40px rgba(20, 16, 34, 0.15);
}

@media (max-width: 768px) {
  :root {
    --space-20: 56px;
    --space-24: 72px;
  }
}