:root {
  color-scheme: dark;
}

:root,
html[data-theme="dark"],
html[data-theme="system"] {
  --color-background: #050505;
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-strong: rgba(255, 255, 255, 0.12);
  --color-text: #f4f4f5;
  --color-muted: rgba(244, 244, 245, 0.7);
  --color-accent: #d4d4d8;
  --color-accent-strong: #f4f4f5;
  --color-accent-rgb: 212, 212, 216;
  --color-accent-soft: rgba(212, 212, 216, 0.18);
  --color-accent-glow: rgba(212, 212, 216, 0.32);
  --color-error: #ff6b6b;
  --color-border: rgba(255, 255, 255, 0.16);
  --glass-background: rgba(15, 15, 15, 0.72);
  --glass-border: rgba(255, 255, 255, 0.12);
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    color-scheme: light;
    --color-background: #f6f6f6;
    --color-surface: rgba(17, 17, 17, 0.06);
    --color-surface-strong: rgba(17, 17, 17, 0.12);
    --color-text: #111827;
    --color-muted: rgba(17, 17, 17, 0.65);
    --color-accent: #52525b;
    --color-accent-strong: #27272a;
    --color-accent-rgb: 82, 82, 91;
    --color-accent-soft: rgba(82, 82, 91, 0.16);
    --color-accent-glow: rgba(82, 82, 91, 0.24);
    --color-error: #d64545;
    --color-border: rgba(17, 17, 17, 0.16);
    --glass-background: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(17, 17, 17, 0.12);
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --color-background: #f6f6f6;
  --color-surface: rgba(17, 17, 17, 0.06);
  --color-surface-strong: rgba(17, 17, 17, 0.12);
  --color-text: #111827;
  --color-muted: rgba(17, 17, 17, 0.65);
  --color-accent: #52525b;
  --color-accent-strong: #27272a;
  --color-accent-rgb: 82, 82, 91;
  --color-accent-soft: rgba(82, 82, 91, 0.16);
  --color-accent-glow: rgba(82, 82, 91, 0.24);
  --color-error: #d64545;
  --color-border: rgba(17, 17, 17, 0.16);
  --glass-background: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(17, 17, 17, 0.14);
}

html[data-theme="pitch-black"] {
  color-scheme: dark;
  --color-background: #000000;
  --color-surface: rgba(255, 255, 255, 0.04);
  --color-surface-strong: rgba(255, 255, 255, 0.08);
  --color-text: #f5f5f5;
  --color-muted: rgba(245, 245, 245, 0.68);
  --color-accent: #d4d4d8;
  --color-accent-strong: #f4f4f5;
  --color-accent-rgb: 212, 212, 216;
  --color-accent-soft: rgba(212, 212, 216, 0.2);
  --color-accent-glow: rgba(212, 212, 216, 0.36);
  --color-error: #ff6b6b;
  --color-border: rgba(255, 255, 255, 0.12);
  --glass-background: rgba(0, 0, 0, 0.8);
  --glass-border: rgba(255, 255, 255, 0.1);
}

html[data-theme="light"],
html[data-theme="system"] {
  --theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23121212'%3E%3Cpath d='M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12Zm0 2a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z'/%3E%3C/svg%3E");
}

html[data-theme="dark"],
html[data-theme="pitch-black"] {
  --theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f5f5f5'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79Z'/%3E%3C/svg%3E");
}