/* v26 themes — 8 curated looks selected via html[data-ui-theme="<name>"].
   "auto" is resolved to graphite/paper in JS before this attribute is set
   (see the inline boot script in index.html <head>), so no [data-ui-theme="auto"]
   block exists here. Attribute name is data-ui-theme (not data-theme) because
   data-theme is already used by the brush-palette buttons. */

html[data-ui-theme='graphite'] {
  --surface-0: #151618;
  --surface-1: #1c1d20;
  --surface-2: #232529;
  --surface-3: #2c2f34;
  --text-1: #ecedee;
  --text-2: #a4a8ae;
  --text-3: #6b7078;
  --border-1: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.16);
  --accent: #4f8cff;
  --accent-rgb: 79, 140, 255;
  --accent-hover: #6ea0ff;
  --accent-fg: #0b1220;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.45);
  --glass-bg: rgba(28, 29, 32, 0.72);
  --glass-blur: 0px;
  --glow: none;
  --radius-md: 10px;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  color-scheme: dark;
}

html[data-ui-theme='midnight'] {
  --surface-0: #0b1220;
  --surface-1: #111a2e;
  --surface-2: #17223a;
  --surface-3: #1f2c48;
  --text-1: #e6edf7;
  --text-2: #9fb0c8;
  --text-3: #64748b;
  --border-1: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.16);
  --accent: #22d3ee;
  --accent-rgb: 34, 211, 238;
  --accent-hover: #5ee2f5;
  --accent-fg: #04252b;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.45);
  --glass-bg: rgba(17, 26, 46, 0.72);
  --glass-blur: 12px;
  --glow: none;
  --radius-md: 10px;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  color-scheme: dark;
}

html[data-ui-theme='forest'] {
  --surface-0: #0f1512;
  --surface-1: #16201b;
  --surface-2: #1d2a23;
  --surface-3: #26362d;
  --text-1: #e8f0ea;
  --text-2: #a3b5a9;
  --text-3: #6b7d71;
  --border-1: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.16);
  --accent: #84cc16;
  --accent-rgb: 132, 204, 22;
  --accent-hover: #a3e635;
  --accent-fg: #0f1a05;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.45);
  --glass-bg: rgba(22, 32, 27, 0.72);
  --glass-blur: 0px;
  --glow: none;
  --radius-md: 10px;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  color-scheme: dark;
}

html[data-ui-theme='neon'] {
  /* Legacy "Cyber Neon" look, preserved as an explicit choice for anyone
     who preferred it — token values only, no element-level overrides. */
  --surface-0: #0a0a0a;
  --surface-1: #141414;
  --surface-2: #1a1a1a;
  --surface-3: #222222;
  --text-1: #ffffff;
  --text-2: #c8c8c8;
  --text-3: #8a8a8a;
  --border-1: rgba(0, 255, 136, 0.18);
  --border-2: rgba(0, 255, 136, 0.4);
  --accent: #00ff88;
  --accent-rgb: 0, 255, 136;
  --accent-hover: #00cc66;
  --accent-fg: #00140a;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.45);
  --glass-bg: rgba(20, 20, 20, 0.85);
  --glass-blur: 16px;
  --glow: 0 0 18px rgba(0, 255, 136, 0.35);
  --radius-md: 14px;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  color-scheme: dark;
}

html[data-ui-theme='contrast'] {
  /* Accessible high-contrast dark theme. */
  --surface-0: #000000;
  --surface-1: #0d0d0d;
  --surface-2: #161616;
  --surface-3: #262626;
  --text-1: #ffffff;
  --text-2: #e6e6e6;
  --text-3: #bfbfbf;
  --border-1: rgba(255, 255, 255, 0.35);
  --border-2: #ffffff;
  --accent: #ffd400;
  --accent-rgb: 255, 212, 0;
  --accent-hover: #ffe24d;
  --accent-fg: #000000;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.45);
  --glass-bg: rgba(13, 13, 13, 0.9);
  --glass-blur: 0px;
  --glow: none;
  --radius-md: 6px;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  color-scheme: dark;
}

html[data-ui-theme='paper'] {
  --surface-0: #f4f1ea;
  --surface-1: #fbfaf6;
  --surface-2: #ffffff;
  --surface-3: #ece8df;
  --text-1: #1e1e1c;
  --text-2: #5b5b57;
  --text-3: #8c8c86;
  --border-1: rgba(0, 0, 0, 0.08);
  --border-2: rgba(0, 0, 0, 0.16);
  --accent: #1d4ed8;
  --accent-rgb: 29, 78, 216;
  --accent-hover: #1e40af;
  --accent-fg: #ffffff;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.18);
  --glass-bg: rgba(251, 250, 246, 0.72);
  --glass-blur: 0px;
  --glow: none;
  --radius-md: 8px;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #2563eb;
  color-scheme: light;
}

html[data-ui-theme='sand'] {
  --surface-0: #efe6d6;
  --surface-1: #f7f0e4;
  --surface-2: #fffaf2;
  --surface-3: #e6dac6;
  --text-1: #2b2118;
  --text-2: #6b5b4e;
  --text-3: #9a8b7c;
  --border-1: rgba(0, 0, 0, 0.08);
  --border-2: rgba(0, 0, 0, 0.16);
  --accent: #c2410c;
  --accent-rgb: 194, 65, 12;
  --accent-hover: #9a3412;
  --accent-fg: #ffffff;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.18);
  --glass-bg: rgba(247, 240, 228, 0.72);
  --glass-blur: 0px;
  --glow: none;
  --radius-md: 12px;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #2563eb;
  color-scheme: light;
}

html[data-ui-theme='studio'] {
  --surface-0: #eceef1;
  --surface-1: #f7f8fa;
  --surface-2: #ffffff;
  --surface-3: #e2e5ea;
  --text-1: #16181d;
  --text-2: #4b5563;
  --text-3: #8b93a1;
  --border-1: rgba(0, 0, 0, 0.08);
  --border-2: rgba(0, 0, 0, 0.16);
  --accent: #6d28d9;
  --accent-rgb: 109, 40, 217;
  --accent-hover: #5b21b6;
  --accent-fg: #ffffff;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.18);
  --glass-bg: rgba(247, 248, 250, 0.72);
  --glass-blur: 10px;
  --glow: none;
  --radius-md: 8px;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #2563eb;
  color-scheme: light;
}

/* Theme preview swatches used in #settings-modal (.theme-option .theme-preview). */
.theme-option[data-ui-theme='graphite'] .theme-preview { --p-bg: #151618; --p-panel: #232529; --p-accent: #4f8cff; --p-text: #ecedee; }
.theme-option[data-ui-theme='midnight'] .theme-preview { --p-bg: #0b1220; --p-panel: #17223a; --p-accent: #22d3ee; --p-text: #e6edf7; }
.theme-option[data-ui-theme='forest'] .theme-preview { --p-bg: #0f1512; --p-panel: #1d2a23; --p-accent: #84cc16; --p-text: #e8f0ea; }
.theme-option[data-ui-theme='neon'] .theme-preview { --p-bg: #0a0a0a; --p-panel: #1a1a1a; --p-accent: #00ff88; --p-text: #ffffff; }
.theme-option[data-ui-theme='contrast'] .theme-preview { --p-bg: #000000; --p-panel: #161616; --p-accent: #ffd400; --p-text: #ffffff; }
.theme-option[data-ui-theme='paper'] .theme-preview { --p-bg: #f4f1ea; --p-panel: #ffffff; --p-accent: #1d4ed8; --p-text: #1e1e1c; }
.theme-option[data-ui-theme='sand'] .theme-preview { --p-bg: #efe6d6; --p-panel: #fffaf2; --p-accent: #c2410c; --p-text: #2b2118; }
.theme-option[data-ui-theme='studio'] .theme-preview { --p-bg: #eceef1; --p-panel: #ffffff; --p-accent: #6d28d9; --p-text: #16181d; }

.theme-preview {
  display: block;
  width: 100%;
  height: 44px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--p-bg, var(--surface-0));
  position: relative;
  border: 1px solid var(--border-1);
}
.theme-preview::before {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 45%;
  background: var(--p-panel, var(--surface-1));
}
.theme-preview::after {
  content: 'Aa';
  position: absolute;
  left: 8px;
  bottom: 6px;
  font: 600 12px var(--font-ui);
  color: var(--p-text, var(--text-1));
}
.theme-preview .theme-preview-accent {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--p-accent, var(--accent));
}
/* "auto" preview: split graphite/paper to signal it follows the system. */
.theme-option[data-ui-theme='auto'] .theme-preview {
  background: linear-gradient(90deg, #151618 0 50%, #f4f1ea 50% 100%);
}
.theme-option[data-ui-theme='auto'] .theme-preview::before,
.theme-option[data-ui-theme='auto'] .theme-preview::after {
  content: none;
}