:root {
  --dew-color-bg: #f6f3ff;
  --dew-color-bg-alt: #eef4ff;
  --dew-color-surface: rgba(255, 255, 255, 0.86);
  --dew-color-surface-strong: rgba(255, 255, 255, 0.96);
  --dew-color-text: #19172a;
  --dew-color-muted: #6f7391;
  --dew-color-primary: #6d56d8;
  --dew-color-primary-hover: #5a45c3;
  --dew-color-primary-soft: #ede7ff;
  --dew-color-border: rgba(205, 210, 231, 0.9);
  --dew-color-border-active: rgba(109, 86, 216, 0.46);

  --dew-font-ui: "Outfit", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe 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: 20px;
  --dew-radius-xl: 24px;
  --dew-radius-pill: 999px;

  --dew-shadow-soft: 0 24px 60px rgba(124, 110, 179, 0.15);
  --dew-shadow-card: 0 16px 36px rgba(124, 110, 179, 0.12);
  --dew-shadow-control: 0 12px 28px rgba(120, 114, 171, 0.1);

  --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);
}