@media (prefers-color-scheme: light) {
  :root:not([data-user-theme]) {
    --color-bg: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-muted: #F1F5F9;
    --color-text: #0F172A;
    --color-text-muted: #475569;
    --color-border: #D0D8E3;
    --color-hero-top: #F3F4F6;
    --color-hero-bottom: #E5E7EB;
    --glow-accent: 0 0 60px rgba(124, 58, 237, 0.25);
    --color-surface-alt: #F9FAFB;
	--btn-number-hover: color-mix(in oklab, var(--color-primary) 80%, white 20%);
  }
}

@media (prefers-color-scheme: dark) {
  :root[data-user-theme="dark"] {
    --color-bg: #0F172A;
    --color-surface: #121826;
    --color-muted: #0C1220;
    --color-text: #E6E9EF;
    --color-text-muted: #A7B0C0;
    --color-border: #273244;
    --color-hero-top: #111827;
    --color-hero-bottom: #0F172A;
    --glow-accent: 0 0 80px rgba(124, 58, 237, 0.35);
    --color-surface-alt: #1A2233;
    --btn-number-hover: color-mix(in oklab, var(--color-primary) 70%, white 30%);
  }
}