/* ==========================================================================
   UnstableCraft Voice - color presets
   Each preset only defines tokens; styles.css consumes them.
   ========================================================================== */

.preset-default {
  --bg: #0b1116;
  --glow: rgba(45, 212, 255, 0.10);
  --surface: #121a21;
  --card: #18222b;
  --field: #0e151b;
  --border: #243443;
  --text: #e8eef2;
  --dim: #8fa3b0;
  --accent: #2dd4ff;
  --accent-hover: #16bdeb;
  --accent-active: #0fa3cc;
  --on-accent: #001318;
  --ok: #3ddc84;
  --on-ok: #04130a;
  --danger: #ff5d5d;
  --on-danger: #ffffff;
  --shadow: rgba(0, 0, 0, 0.45);
  --scheme: dark;
}

.preset-dark {
  --bg: #050608;
  --glow: rgba(27, 167, 224, 0.08);
  --surface: #0d0f12;
  --card: #13161b;
  --field: #0a0c0f;
  --border: #1f242b;
  --text: #dfe5ea;
  --dim: #7d8893;
  --accent: #1ba7e0;
  --accent-hover: #138cc0;
  --accent-active: #0d74a1;
  --on-accent: #00131c;
  --ok: #2fae5d;
  --on-ok: #03130a;
  --danger: #c23636;
  --on-danger: #ffffff;
  --shadow: rgba(0, 0, 0, 0.6);
  --scheme: dark;
}

.preset-light {
  --bg: #eef1f4;
  --glow: rgba(0, 119, 194, 0.08);
  --surface: #ffffff;
  --card: #f5f7f9;
  --field: #eef1f4;
  --border: #d4dbe2;
  --text: #18222b;
  --dim: #5d6b77;
  --accent: #0077c2;
  --accent-hover: #005fa1;
  --accent-active: #004a82;
  --on-accent: #ffffff;
  --ok: #18a957;
  --on-ok: #ffffff;
  --danger: #d23c3c;
  --on-danger: #ffffff;
  --shadow: rgba(30, 40, 50, 0.18);
  --scheme: light;
}

.preset-green {
  --bg: #08140a;
  --glow: rgba(53, 230, 90, 0.10);
  --surface: #0f2010;
  --card: #143018;
  --field: #0b1a0d;
  --border: #234d28;
  --text: #ddf5dd;
  --dim: #8fbf94;
  --accent: #35e65a;
  --accent-hover: #28cf4b;
  --accent-active: #1fb33e;
  --on-accent: #03150a;
  --ok: #35e65a;
  --on-ok: #03150a;
  --danger: #c24444;
  --on-danger: #ffffff;
  --shadow: rgba(0, 0, 0, 0.5);
  --scheme: dark;
}

.preset-blue {
  --bg: #070d1c;
  --glow: rgba(78, 161, 255, 0.10);
  --surface: #0e1730;
  --card: #131f3e;
  --field: #0a1226;
  --border: #27406b;
  --text: #dde8ff;
  --dim: #8fa9d6;
  --accent: #4ea1ff;
  --accent-hover: #2f86ea;
  --accent-active: #1c6fcd;
  --on-accent: #021024;
  --ok: #4fcf7f;
  --on-ok: #021207;
  --danger: #c14848;
  --on-danger: #ffffff;
  --shadow: rgba(0, 0, 0, 0.5);
  --scheme: dark;
}

.preset-purple {
  --bg: #120a1d;
  --glow: rgba(198, 125, 255, 0.10);
  --surface: #1d1230;
  --card: #261a3e;
  --field: #160e26;
  --border: #45306b;
  --text: #efe4ff;
  --dim: #b79ade;
  --accent: #c67dff;
  --accent-hover: #ad62ea;
  --accent-active: #9348cd;
  --on-accent: #1b0930;
  --ok: #54cf86;
  --on-ok: #03130a;
  --danger: #c14848;
  --on-danger: #ffffff;
  --shadow: rgba(0, 0, 0, 0.55);
  --scheme: dark;
}

.preset-red {
  --bg: #190a0d;
  --glow: rgba(255, 91, 107, 0.10);
  --surface: #2a1218;
  --card: #371820;
  --field: #1f0d11;
  --border: #5e2b34;
  --text: #ffe3e6;
  --dim: #d39aa2;
  --accent: #ff5b6b;
  --accent-hover: #ea4455;
  --accent-active: #cc3241;
  --on-accent: #2b050a;
  --ok: #59d087;
  --on-ok: #03130a;
  --danger: #d8404c;
  --on-danger: #ffffff;
  --shadow: rgba(0, 0, 0, 0.55);
  --scheme: dark;
}

.preset-yellow {
  --bg: #171307;
  --glow: rgba(255, 216, 77, 0.10);
  --surface: #262007;
  --card: #322a0d;
  --field: #1d1808;
  --border: #5c4f1f;
  --text: #fff6cf;
  --dim: #cdbf8c;
  --accent: #ffd84d;
  --accent-hover: #eac33b;
  --accent-active: #d1aa26;
  --on-accent: #2f2200;
  --ok: #58cd81;
  --on-ok: #03130a;
  --danger: #b53a3a;
  --on-danger: #ffffff;
  --shadow: rgba(0, 0, 0, 0.55);
  --scheme: dark;
}

.preset-cyan {
  --bg: #06181c;
  --glow: rgba(57, 231, 255, 0.10);
  --surface: #0c272d;
  --card: #103339;
  --field: #081d22;
  --border: #1f5862;
  --text: #d6fbff;
  --dim: #8cc9d2;
  --accent: #39e7ff;
  --accent-hover: #22cade;
  --accent-active: #11adc0;
  --on-accent: #01242b;
  --ok: #51d47f;
  --on-ok: #03130a;
  --danger: #b43a3a;
  --on-danger: #ffffff;
  --shadow: rgba(0, 0, 0, 0.5);
  --scheme: dark;
}

.preset-monochrome {
  --bg: #0c0c0c;
  --glow: rgba(255, 255, 255, 0.05);
  --surface: #161616;
  --card: #1d1d1d;
  --field: #101010;
  --border: #333333;
  --text: #efefef;
  --dim: #9b9b9b;
  --accent: #d6d6d6;
  --accent-hover: #bcbcbc;
  --accent-active: #a2a2a2;
  --on-accent: #111111;
  --ok: #59b56d;
  --on-ok: #04130a;
  --danger: #a64545;
  --on-danger: #ffffff;
  --shadow: rgba(0, 0, 0, 0.6);
  --scheme: dark;
}

.preset-monokai {
  --bg: #1d1e19;
  --glow: rgba(166, 226, 46, 0.08);
  --surface: #272822;
  --card: #32332b;
  --field: #22231d;
  --border: #4d4a3c;
  --text: #f8f8f2;
  --dim: #b6b3a0;
  --accent: #a6e22e;
  --accent-hover: #8dcf20;
  --accent-active: #73b018;
  --on-accent: #1f220f;
  --ok: #a6e22e;
  --on-ok: #1f220f;
  --danger: #f92672;
  --on-danger: #ffffff;
  --shadow: rgba(0, 0, 0, 0.55);
  --scheme: dark;
}

.preset-orange {
  --bg: #170d06;
  --glow: rgba(255, 157, 77, 0.10);
  --surface: #271509;
  --card: #341d0e;
  --field: #1d1007;
  --border: #5e3c1e;
  --text: #ffe8d8;
  --dim: #d8ad8d;
  --accent: #ff9d4d;
  --accent-hover: #e88735;
  --accent-active: #c96d20;
  --on-accent: #2a1200;
  --ok: #5dc97d;
  --on-ok: #03130a;
  --danger: #c2473b;
  --on-danger: #ffffff;
  --shadow: rgba(0, 0, 0, 0.55);
  --scheme: dark;
}

.preset-mint {
  --bg: #081612;
  --glow: rgba(78, 230, 184, 0.10);
  --surface: #102521;
  --card: #16312b;
  --field: #0b1c17;
  --border: #28564b;
  --text: #dbfff4;
  --dim: #93cdbd;
  --accent: #4ee6b8;
  --accent-hover: #35c99d;
  --accent-active: #1fa57e;
  --on-accent: #082019;
  --ok: #4ee6b8;
  --on-ok: #082019;
  --danger: #c45050;
  --on-danger: #ffffff;
  --shadow: rgba(0, 0, 0, 0.5);
  --scheme: dark;
}

.preset-rose {
  --bg: #170a10;
  --glow: rgba(255, 107, 156, 0.10);
  --surface: #28121c;
  --card: #351826;
  --field: #1d0c14;
  --border: #5e3147;
  --text: #ffe4ef;
  --dim: #d49ab2;
  --accent: #ff6b9c;
  --accent-hover: #e85386;
  --accent-active: #c83d70;
  --on-accent: #2a0914;
  --ok: #56cb8d;
  --on-ok: #03130a;
  --danger: #c44a6a;
  --on-danger: #ffffff;
  --shadow: rgba(0, 0, 0, 0.55);
  --scheme: dark;
}

body[class*="preset-"] {
  --theme-input-bg: var(--field);
  --theme-input-text: var(--text);
  --theme-input-border: var(--border);
  --theme-button-bg: var(--accent);
  --theme-button-text: var(--on-accent);
  --theme-button-hover: var(--accent-hover);
  --theme-button-active: var(--accent-active);
  --theme-muted-bg: var(--danger);
  --theme-muted-text: var(--on-danger);
  --theme-unmuted-bg: var(--ok);
  --theme-unmuted-text: var(--on-ok);
}

body[class*="preset-"] #joinForm input:not([type="checkbox"]),
body[class*="preset-"] #joinForm select {
  -webkit-appearance: none;
  appearance: none;
  background: var(--field);
  color: var(--text);
  border-color: var(--border);
  caret-color: var(--text);
}

body[class*="preset-"] #joinForm input:not([type="checkbox"]):hover,
body[class*="preset-"] #joinForm select:hover,
body[class*="preset-"] #joinForm input:not([type="checkbox"]):focus-visible,
body[class*="preset-"] #joinForm select:focus-visible {
  border-color: var(--accent);
}

body[class*="preset-"] #joinForm input:-webkit-autofill,
body[class*="preset-"] #joinForm input:-webkit-autofill:hover,
body[class*="preset-"] #joinForm input:-webkit-autofill:focus,
body[class*="preset-"] #joinForm input:-webkit-autofill:active,
body[class*="preset-"] #joinForm input:autofill,
body[class*="preset-"] #joinForm input:-internal-autofill-selected,
body[class*="preset-"] #joinForm select:-webkit-autofill,
body[class*="preset-"] #joinForm select:-webkit-autofill:hover,
body[class*="preset-"] #joinForm select:-webkit-autofill:focus,
body[class*="preset-"] #joinForm select:-webkit-autofill:active,
body[class*="preset-"] #joinForm select:-internal-autofill-selected {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--field) inset !important;
  box-shadow: 0 0 0 1000px var(--field) inset !important;
  background: var(--field) !important;
  caret-color: var(--text);
}

body[class*="preset-"] #allowBackgroundPtt {
  accent-color: var(--accent);
}