/**
 * Color mode design tokens
 */
html.dark,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0b09;
  --s1: #161412;
  --s2: #1e1b17;
  --s3: #2a2420;
  --s4: #3a322a;
  --ink: #f5f0e8;
  --mid: #b8aa9a;
  --dim: #7d7268;
  --surface: #161412;
  --surface-2: #1e1b17;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0c0b09;
    --s1: #161412;
    --s2: #1e1b17;
    --s3: #2a2420;
    --s4: #3a322a;
    --ink: #f5f0e8;
    --mid: #b8aa9a;
    --dim: #7d7268;
    --surface: #161412;
    --surface-2: #1e1b17;
  }
}

html[data-theme="light"] {
  color-scheme: light;
}

html.dark body,
html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--ink);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body {
    background: var(--bg, #0c0b09);
    color: var(--ink, #f5f0e8);
  }
}