html {
  color-scheme: light;
}

html[data-theme="light"] {
  --color-bg: #f6f6f3;
  --color-surface: #ffffff;
  --color-text: #0f1115;
  --color-muted: #5a5f6a;
  --color-border: rgba(15, 17, 21, 0.12);
  --color-accent: #2b2f36;
  --color-accent-weak: rgba(43, 47, 54, 0.08);
  --color-button-text: #ffffff;
  --color-hero: #f2f2ef;
  --shadow-soft: 0 24px 60px rgba(15, 17, 21, 0.08);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0f1115;
  --color-surface: #181b22;
  --color-text: #f7f7f2;
  --color-muted: #b4bac4;
  --color-border: rgba(247, 247, 242, 0.12);
  --color-accent: #f7f7f2;
  --color-accent-weak: rgba(247, 247, 242, 0.08);
  --color-button-text: #0f1115;
  --color-hero: #13161d;
  --shadow-soft: 0 24px 60px rgba(0, 0, 0, 0.35);
}

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
}

a {
  color: var(--color-text);
  text-decoration: none;
}