@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* Canvas & Surfaces (Ethereal Light Theme) */
  --color-canvas-base: #F8F9FB;
  --color-surface-low: #F2F4F6;
  --color-surface-pure: #FFFFFF;
  --color-surface-dim: #E5E7EB;
  --color-border-subtle: rgba(0, 0, 0, 0.06);
  --color-border-card: rgba(229, 231, 235, 0.8);

  /* Typography & Ink */
  --color-text-primary: #111215;
  --color-text-secondary: #6B7280;
  --color-text-muted: #9CA3AF;
  --color-text-inverted: #FFFFFF;

  /* Focal Accents */
  --color-accent-crimson: #E11D48;
  --color-accent-crimson-hover: #BE123C;
  --color-accent-crimson-glow: rgba(225, 29, 72, 0.2);
  --color-interactive-dark: #18181B;
  --color-interactive-dark-hover: #27272A;

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-bg-elevated: rgba(255, 255, 255, 0.92);
  --glass-blur: blur(14px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.6);

  /* Shadows */
  --shadow-pill: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 4px 10px -2px rgba(0, 0, 0, 0.02);
  --shadow-card: 0 20px 35px -10px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-cta: 0 12px 24px -4px rgba(24, 24, 27, 0.28), 0 4px 10px -2px rgba(24, 24, 27, 0.15);
  --shadow-dropdown: 0 14px 28px rgba(0, 0, 0, 0.08);

  /* Radii */
  --radius-pill: 9999px;
  --radius-card: 20px;
  --radius-button: 14px;
  --radius-chip: 8px;

  /* Typography Scale */
  --font-family-display: 'Space Grotesk', -apple-system, sans-serif;
  --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --letter-spacing-tight: -0.03em;

  /* Animation & Transitions */
  --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}