:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f4f6;
  --bg2: #ffffff;
  --bg3: #f7f7f7;
  --bg4: #ececec;
  --card: #ffffff;
  --surface: #f7f7f7;
  --border: #d7d7d7;
  --border2: #a97949;
  --text: #111111;
  --muted: #666666;
  --muted2: #8a8a8a;
  --ember: #e85d04;
  --ember2: #b45309;
  --ember-dim: rgba(232, 93, 4, .12);
  --ember-glow: 0 8px 20px rgba(232, 93, 4, .22);
  --green: #16834a;
  --green-bg: rgba(22, 131, 74, .12);
  --yellow: #a16207;
  --yell-bg: rgba(161, 98, 7, .13);
  --red: #c83d3d;
  --red-bg: rgba(200, 61, 61, .12);
  --blue: #2767b1;
  --blue-bg: rgba(39, 103, 177, .12);
  --gray-bg: rgba(118, 107, 96, .12);
  --purple: #7c3aed;
  --purple-bg: rgba(124, 58, 237, .12);
  --teal: #0f766e;
  --teal-bg: rgba(15, 118, 110, .12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, .10);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .16);
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #11100e;
  --bg2: #191714;
  --bg3: #211e1a;
  --bg4: #2b261f;
  --card: #191714;
  --surface: #211e1a;
  --border: #332d26;
  --border2: #493f34;
  --text: #f2eee8;
  --muted: #a79b8f;
  --muted2: #75695d;
  --ember: #f07822;
  --ember2: #f6a03a;
  --ember-dim: rgba(240, 120, 34, .14);
  --ember-glow: 0 14px 36px rgba(240, 120, 34, .22);
  --green: #38c172;
  --green-bg: rgba(56, 193, 114, .13);
  --yellow: #f1b434;
  --yell-bg: rgba(241, 180, 52, .13);
  --red: #f06464;
  --red-bg: rgba(240, 100, 100, .12);
  --blue: #68a7ff;
  --blue-bg: rgba(104, 167, 255, .13);
  --gray-bg: rgba(167, 155, 143, .12);
  --purple: #b084ff;
  --purple-bg: rgba(176, 132, 255, .14);
  --teal: #3dd2c6;
  --teal-bg: rgba(61, 210, 198, .13);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, .28);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, .36);
}

* { letter-spacing: 0; }
html, body { background: var(--bg); color: var(--text); }