:root {
  --dew-color-bg: #f5f3fb;
  --dew-color-bg-alt: #f1f1fa;
  --dew-color-surface: rgba(255, 255, 255, 0.62);
  --dew-color-surface-strong: #ffffff;
  --dew-color-text: #1b1826;
  --dew-color-muted: #57536a;
  --dew-color-primary: #574ca8;
  --dew-color-primary-hover: #443a87;
  --dew-color-primary-soft: #e8e5f8;
  --dew-color-border: #e5e2ee;
  --dew-color-border-active: rgba(87, 76, 168, 0.5);

  --dew-font-ui: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dew-font-display: "Quicksand", "Manrope", system-ui, sans-serif;

  --dew-space-1: 0.25rem;
  --dew-space-2: 0.5rem;
  --dew-space-3: 0.75rem;
  --dew-space-4: 1rem;
  --dew-space-5: 1.25rem;
  --dew-space-6: 1.5rem;
  --dew-space-8: 2rem;
  --dew-space-10: 2.5rem;
  --dew-space-12: 3rem;

  --dew-radius-sm: 10px;
  --dew-radius-md: 16px;
  --dew-radius-lg: 24px;
  --dew-radius-xl: 24px;
  --dew-radius-pill: 999px;

  --dew-shadow-soft: 0 16px 50px rgba(87, 76, 168, 0.14);
  --dew-shadow-card: 0 8px 30px rgba(87, 76, 168, 0.1);
  --dew-shadow-control: 0 4px 18px rgba(87, 76, 168, 0.08);

  --dew-z-base: 1;
  --dew-z-sticky: 20;
  --dew-z-panel: 40;
  --dew-z-sheet: 60;
  --dew-z-modal: 100;
  --dew-z-player: 1000;
  --dew-z-toast: 2000;

  --dew-breakpoint-mobile-max: 480px;
  --dew-breakpoint-tablet-max: 768px;
  --dew-breakpoint-desktop-min: 769px;
  --dew-breakpoint-wide-min: 1200px;
}

html {
  font-family: var(--dew-font-ui);
}