html[data-theme="light"] {
  --bg:#faf9f6; --bg2:#f2f0eb; --surface:#ffffff;
  --teal:#7e4a5d; --teal-light:#f0e9ec; --teal-mid:#986e7d;
  --sg-bg:#faf9f6; --sg-bg2:#f2f0eb; --sg-bg3:#e9e7e2; --sg-surface:#ffffff;
  --sg-teal:#7e4a5d; --sg-teal-700:#653b4a; --sg-teal-900:#512f3c;
  --sg-teal-100:#f0e9ec; --sg-teal-50:#f9f6f7;
  --sg-on-accent:#ffffff;
  --sg-focus-ring:0 0 0 3px rgba(126,74,93,0.28);
  --rail-bg:#f5f3ef;
}

html[data-theme="dark"] {
  --bg:#1c1a19; --bg2:#2e2c2b; --surface:#252322;
  --border:rgba(255,255,255,0.09); --border2:rgba(255,255,255,0.16);
  --text:#ece9e4; --text2:#b9b4ad; --text3:#9b968f;
  --teal:#c19fac; --teal-light:#443037; --teal-mid:#a87a8c;
  --green:#66b88a; --green-light:#1e2e26;
  --amber:#d6a84e; --amber-light:#2e2a1a;
  --coral:#ef7a5f; --coral-light:#3a1f19; --coral-border:#7a3426;
--sg-bg:#1c1a19; --sg-bg2:#2e2c2b; --sg-bg3:#373534; --sg-surface:#252322;
  --sg-border:rgba(255,255,255,0.09); --sg-border2:rgba(255,255,255,0.16); --sg-border3:rgba(255,255,255,0.26);
  --sg-text:#ece9e4; --sg-text2:#b9b4ad; --sg-text3:#9b968f; --sg-on-accent:#1c1a19;
  --sg-teal:#c19fac; --sg-teal-700:#d0b3be; --sg-teal-900:#ddc6cf;
  --sg-teal-100:#443037; --sg-teal-50:#2f2629;
  --sg-green:#66b88a; --sg-green-100:#1e2e26;
  --sg-amber:#d6a84e; --sg-amber-100:#2e2a1a;
  --sg-coral:#ef7a5f; --sg-coral-700:#f39580; --sg-coral-100:#3a1f19;
  --sg-focus-ring:0 0 0 3px rgba(193,159,172,0.40);
  --sg-focus-ring-coral:0 0 0 3px rgba(239,122,95,0.35);
  --rail-bg:#191716;
}

body, .modal, .overlay, .topbar, .grants-rail, .inner-sb, .screen, .sg-btn,
.settings-section, input, textarea, select {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.theme-swatches { display:flex; gap:10px; flex-wrap:wrap; }
.theme-swatch {
  width:62px; cursor:pointer; border:none; background:none; padding:0;
  font-family:var(--font-b); text-align:center;
}
.theme-swatch .sw-chip {
  height:42px; border-radius:8px; border:1.5px solid var(--border2);
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:5px; gap:4px; transition:border-color .12s, box-shadow .12s;
  position:relative; overflow:hidden;
}
.theme-swatch .sw-dot { width:12px; height:12px; border-radius:50%; }
.theme-swatch.active .sw-chip { border-color:var(--teal); box-shadow:0 0 0 2px var(--teal); }
.theme-swatch .sw-name { font-size:10.5px; color:var(--text2); margin-top:5px; display:block; }
.theme-swatch.active .sw-name { color:var(--teal); font-weight:600; }