:root {
  color-scheme: light;
  --bg: #fff9f0;
  --surface: #ffffff;
  --surface-soft: #fbf2e5;
  --surface-strong: #f4e3ce;
  --text: #1d2924;
  --text-soft: #69756e;
  --border: #eadfce;
  --primary: #b45309;
  --primary-hover: #92400e;
  --primary-soft: #fff0d7;
  --secondary: #0f766e;
  --secondary-soft: #e1f5f1;
  --tone: #be285e;
  --tone-soft: #fde6ef;
  --tone-mid: #0f766e;
  --tone-low: #4f46e5;
  --tone-falling: #be285e;
  --tone-high: #c2410c;
  --tone-rising: #2f7d57;
  --success: #2f7d57;
  --danger: #b42318;
  --focus: #2563eb;
  --shadow-sm: 0 1px 2px rgb(64 43 20 / 8%);
  --shadow-md: 0 18px 45px rgb(64 43 20 / 10%);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --font-latin: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-thai: "IBM Plex Sans Thai Looped", "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  --font-thai-display: Chonburi, "Noto Serif Thai", var(--font-thai);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1714;
  --surface: #18231f;
  --surface-soft: #202f29;
  --surface-strong: #2b3c35;
  --text: #f7f2e8;
  --text-soft: #a9b6ae;
  --border: #33483f;
  --primary: #f59e0b;
  --primary-hover: #fbbf24;
  --primary-soft: #3b2b12;
  --secondary: #2dd4bf;
  --secondary-soft: #113a35;
  --tone: #f472a4;
  --tone-soft: #43172a;
  --tone-mid: #2dd4bf;
  --tone-low: #a5b4fc;
  --tone-falling: #f472a4;
  --tone-high: #fdba74;
  --tone-rising: #86efac;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 24%);
  --shadow-md: 0 18px 45px rgb(0 0 0 / 25%);
}