:root {
  color-scheme: dark;
  --font-sans: Inter, "Noto Sans Thai", "Segoe UI", system-ui, sans-serif;
  --color-bg: #12100e;
  --color-bg-glow: #1d1914;
  --color-surface: #1c1916;
  --color-surface-raised: #26211d;
  --color-footer: #100e0c;
  --color-input: #171411;
  --color-text: #f8f4ed;
  --color-text-muted: #b5aca1;
  --color-border: #3a342e;
  --color-border-strong: #5a5046;
  --color-accent: #f0b44a;
  --color-accent-soft: #40311b;
  --color-accent-contrast: #17110a;
  --color-link: #f4c878;
  --color-focus: #ffd98b;
  --color-error: #ff9b8e;
  --color-success: #84d7a6;
  --color-active-bg: #4a3611;
  --color-active-text: #fff4d6;
  --shadow-sm: 0 2px 10px rgb(0 0 0 / 0.16);
  --shadow-lg: 0 22px 54px rgb(0 0 0 / 0.28);
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #fbf8f2;
  --color-bg-glow: #f2eadc;
  --color-surface: #fffdf9;
  --color-surface-raised: #fffaf2;
  --color-footer: #f3ede4;
  --color-input: #fffdfa;
  --color-text: #231c16;
  --color-text-muted: #6f6256;
  --color-border: #e2d8ca;
  --color-border-strong: #c4b6a4;
  --color-accent: #a96000;
  --color-accent-soft: #fff0cf;
  --color-accent-contrast: #fffaf2;
  --color-link: #895000;
  --color-focus: #8b5100;
  --color-error: #b3261e;
  --color-success: #147b47;
  --color-active-bg: #fff0c7;
  --color-active-text: #382200;
  --shadow-sm: 0 2px 10px rgb(54 38 20 / 0.08);
  --shadow-lg: 0 22px 54px rgb(54 38 20 / 0.12);
}

html { background: var(--color-bg); }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: radial-gradient(circle at 80% -15%, var(--color-bg-glow), transparent 38rem), var(--color-bg);
  line-height: 1.5;
}