:root {
  color-scheme: light;

  --yoz-primary: #6c5cff;
  --yoz-primary-hover: #5b4cf0;
  --yoz-primary-soft: #eeeaff;
  --yoz-primary-muted: #a59cff;
  --yoz-secondary: #8b5cf6;
  --yoz-accent-pink: #f43f7f;
  --yoz-accent-blue: #3b82f6;
  --yoz-accent-green: #22c55e;
  --yoz-accent-amber: #f59e0b;

  --yoz-bg: #f8fafc;
  --yoz-bg-elevated: #ffffff;
  --yoz-bg-subtle: #f3f5fb;
  --yoz-bg-input: #f7f8fc;

  --yoz-surface: #ffffff;
  --yoz-surface-soft: #fbfcff;
  --yoz-surface-active: #f0edff;
  --yoz-surface-hover: #f6f4ff;

  --yoz-border: #e7eaf2;
  --yoz-border-strong: #d9deeb;

  --yoz-text: #111827;
  --yoz-text-muted: #64748b;
  --yoz-text-soft: #94a3b8;
  --yoz-text-inverse: #ffffff;

  --yoz-danger: #ef4444;
  --yoz-success: #22c55e;
  --yoz-warning: #f59e0b;
  --yoz-info: #3b82f6;

  --yoz-shadow-sm: 0 1px 2px rgb(15 23 42 / 6%);
  --yoz-shadow-md: 0 8px 24px rgb(15 23 42 / 8%);
  --yoz-shadow-lg: 0 18px 48px rgb(15 23 42 / 10%);

  --yoz-radius-sm: 8px;
  --yoz-radius-md: 12px;
  --yoz-radius-lg: 16px;
  --yoz-radius-pill: 999px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --yoz-primary: #7467ff;
  --yoz-primary-hover: #867bff;
  --yoz-primary-soft: #27215f;
  --yoz-primary-muted: #9f96ff;
  --yoz-secondary: #9b5cff;
  --yoz-accent-pink: #ff4f87;
  --yoz-accent-blue: #60a5fa;
  --yoz-accent-green: #4ade80;
  --yoz-accent-amber: #fbbf24;

  --yoz-bg: #07111f;
  --yoz-bg-elevated: #101b2e;
  --yoz-bg-subtle: #0c1728;
  --yoz-bg-input: #172235;

  --yoz-surface: #111c2f;
  --yoz-surface-soft: #142035;
  --yoz-surface-active: #252b66;
  --yoz-surface-hover: #1a2740;

  --yoz-border: #24324a;
  --yoz-border-strong: #33415c;

  --yoz-text: #f8fafc;
  --yoz-text-muted: #b7c2d6;
  --yoz-text-soft: #8391aa;
  --yoz-text-inverse: #07111f;

  --yoz-danger: #fb7185;
  --yoz-success: #4ade80;
  --yoz-warning: #fbbf24;
  --yoz-info: #60a5fa;

  --yoz-shadow-sm: 0 1px 2px rgb(0 0 0 / 18%);
  --yoz-shadow-md: 0 10px 30px rgb(0 0 0 / 24%);
  --yoz-shadow-lg: 0 24px 60px rgb(0 0 0 / 34%);
}