/* Prompt Wizard — optional visual skins (html[data-skin="…"]). Base tokens live in styles.css */

/* Windows XP Luna blue */
html[data-skin="xp-luna"] {
  --desk: #3a6ea5;
  --panel: #ece9d8;
  --panel-soft: #f5f4ef;
  --input-bg: #ffffff;
  --border: #aca899;
  --border-strong: #716f64;
  --bevel-tl: #ffffff;
  --bevel-br: #aca899;
  --text: #1a1a1a;
  --text-muted: #4a4a4a;
  --text-faint: #5c5c5c;
  --title-basic: linear-gradient(180deg, #3c81f3 0%, #2567d5 45%, #1e4fae 100%);
  --title-detail: linear-gradient(180deg, #6b4fa3 0%, #4b2f83 100%);
  --surface-heading: #0f3a82;
  --tray-bg: #c6c3b5;
  --tray-active: #f5f4ef;
  --menu-bg: #ece9d8;
  --taskbar-bg: linear-gradient(180deg, #3c81f3 0%, #245edc 55%, #1a4a9e 100%);
  --taskbar-fg: #ffffff;
  --wizard-frame: #1a4488;
  --shadow-deep: rgba(0, 40, 100, 0.28);
}

html[data-skin="xp-luna"] .window.wizard {
  border-radius: 6px 6px 0 0;
}

html[data-skin="xp-luna"] .window .title-bar {
  border-radius: 4px 4px 0 0;
}

html[data-skin="xp-luna"] button.default {
  border-radius: 4px;
}

/* Office 2000 — cool gray, flatter */
html[data-skin="office2000"] {
  --desk: #7a7f87;
  --panel: #d4d7de;
  --panel-soft: #e2e4ea;
  --input-bg: #ffffff;
  --border: #9aa0aa;
  --bevel-tl: #f2f3f6;
  --bevel-br: #7a808a;
  --text: #1c1f24;
  --text-muted: #3d4450;
  --title-basic: linear-gradient(180deg, #5b6b8a 0%, #3d4a62 100%);
  --title-detail: linear-gradient(180deg, #5a4a70 0%, #3a3048 100%);
  --surface-heading: #2a3344;
  --tray-bg: #a8adb8;
  --tray-active: #e8eaef;
  --menu-bg: #eceef2;
  --shadow-deep: rgba(0, 0, 0, 0.22);
}

html[data-skin="office2000"] .window.wizard,
html[data-skin="office2000"] button {
  box-shadow: none;
}

/* Classic Mac OS Platinum */
html[data-skin="mac-platinum"] {
  --desk: #999999;
  --panel: #ededed;
  --panel-soft: #e4e4e4;
  --input-bg: #ffffff;
  --border: #8b8b8b;
  --bevel-tl: #ffffff;
  --bevel-br: #6a6a6a;
  --text: #000000;
  --text-muted: #333333;
  --title-basic: repeating-linear-gradient(90deg, #ededed 0 2px, #dcdcdc 2px 4px);
  --title-detail: repeating-linear-gradient(90deg, #e8e0f0 0 2px, #d8d0e4 2px 4px);
  --title-bar-fg: #000000;
  --surface-heading: #000080;
  --tray-bg: #c8c8c8;
  --tray-active: #ffffff;
  --menu-bg: #ededed;
  --font-ui: "Charcoal", "Lucida Grande", "Helvetica Neue", Tahoma, sans-serif;
}

html[data-skin="mac-platinum"] .window .title-bar {
  border-bottom: 1px solid #000000;
}

/* IDE / VS Code */
html[data-skin="ide"] {
  --desk: #1e1e1e;
  --panel: #252526;
  --panel-soft: #2d2d30;
  --input-bg: #1e1e1e;
  --border: #3c3c3c;
  --bevel-tl: #505050;
  --bevel-br: #181818;
  --text: #d4d4d4;
  --text-muted: #a0a0a0;
  --text-faint: #808080;
  --title-basic: linear-gradient(90deg, #3c3c3c 0%, #2d2d30 100%);
  --title-detail: linear-gradient(90deg, #4a3c5a 0%, #352840 100%);
  --title-bar-fg: #cccccc;
  --surface-heading: #569cd6;
  --focus: #007fd4;
  --tray-bg: #333333;
  --tray-active: #094771;
  --menu-bg: #252526;
  --taskbar-bg: linear-gradient(180deg, #323233 0%, #1e1e1e 100%);
  --taskbar-fg: #cccccc;
  --wizard-frame: #007fd4;
  --shadow-deep: rgba(0, 0, 0, 0.55);
  --font-ui: ui-monospace, "Cascadia Code", "Consolas", "Courier New", monospace;
}

html[data-skin="ide"] .wizard-col-form textarea,
html[data-skin="ide"] .wizard-col-form input[type="text"],
html[data-skin="ide"] #promptOptimized {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
}

/* Notion / paper */
html[data-skin="notion"] {
  --desk: #f7f6f3;
  --panel: #ffffff;
  --panel-soft: #faf9f6;
  --input-bg: #ffffff;
  --border: #e8e7e4;
  --border-strong: #d4d3cf;
  --bevel-tl: #ffffff;
  --bevel-br: #e0dfdb;
  --text: #37352f;
  --text-muted: #6f6e69;
  --text-faint: #8f8e88;
  --title-basic: linear-gradient(180deg, #f7f6f3 0%, #eceae6 100%);
  --title-detail: linear-gradient(180deg, #ede8f5 0%, #e0d8ec 100%);
  --title-bar-fg: #37352f;
  --surface-heading: #37352f;
  --focus: #2383e2;
  --tray-bg: #f1f0ed;
  --tray-active: #e8f3fc;
  --menu-bg: #ffffff;
  --taskbar-bg: linear-gradient(180deg, #ffffff 0%, #f3f2ef 100%);
  --taskbar-fg: #37352f;
  --wizard-frame: #d4d3cf;
  --shadow-deep: rgba(15, 15, 15, 0.06);
  --font-ui: ui-serif, "Georgia", "Times New Roman", serif;
}

html[data-skin="notion"] .group-title {
  font-family: ui-serif, Georgia, serif;
  letter-spacing: -0.02em;
}

/* Brutalist */
html[data-skin="brutalist"] {
  --desk: #ffffff;
  --panel: #ffffff;
  --panel-soft: #f4f4f4;
  --input-bg: #ffffff;
  --border: #000000;
  --border-strong: #000000;
  --bevel-tl: #000000;
  --bevel-br: #000000;
  --text: #000000;
  --text-muted: #000000;
  --title-basic: #000000;
  --title-detail: #000000;
  --title-bar-fg: #ffffff;
  --surface-heading: #000000;
  --focus: #0000ff;
  --tray-bg: #ffffff;
  --tray-active: #ffff00;
  --menu-bg: #ffffff;
  --taskbar-bg: #000000;
  --taskbar-fg: #ffffff;
  --start-bg: #000000;
  --start-fg: #ffffff;
  --wizard-frame: #000000;
  --shadow-deep: rgba(0, 0, 0, 0);
  --font-ui: system-ui, Arial, sans-serif;
}

html[data-skin="brutalist"] .window.wizard,
html[data-skin="brutalist"] button {
  border-width: 3px;
  border-radius: 0;
  box-shadow: none;
}

/* Glass / frosted */
html[data-skin="glass"] {
  --desk: #4a5568;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-soft: rgba(255, 255, 255, 0.55);
  --input-bg: rgba(255, 255, 255, 0.92);
  --border: rgba(255, 255, 255, 0.45);
  --bevel-tl: rgba(255, 255, 255, 0.9);
  --bevel-br: rgba(60, 80, 120, 0.25);
  --text: #1a202c;
  --text-muted: #4a5568;
  --title-basic: linear-gradient(135deg, rgba(99, 179, 237, 0.85) 0%, rgba(102, 126, 234, 0.9) 100%);
  --title-detail: linear-gradient(135deg, rgba(159, 122, 234, 0.85) 0%, rgba(128, 90, 213, 0.9) 100%);
  --surface-heading: #2b6cb0;
  --tray-bg: rgba(255, 255, 255, 0.35);
  --tray-active: rgba(255, 255, 255, 0.75);
  --menu-bg: rgba(255, 255, 255, 0.92);
  --taskbar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(230, 235, 245, 0.75) 100%);
  --taskbar-fg: #1a202c;
  --wizard-frame: rgba(255, 255, 255, 0.35);
  --shadow-deep: rgba(0, 20, 60, 0.18);
}

html[data-skin="glass"] body {
  background-image:
    radial-gradient(1200px 600px at 20% 0%, rgba(129, 230, 217, 0.35), transparent),
    radial-gradient(900px 500px at 90% 20%, rgba(183, 148, 244, 0.35), transparent),
    linear-gradient(165deg, #667eea 0%, #764ba2 45%, #2d3748 100%);
  background-attachment: fixed;
}

@supports (backdrop-filter: blur(8px)) {
  html[data-skin="glass"] .window.wizard {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

/* CRT / phosphor */
html[data-skin="crt"] {
  --desk: #0a120a;
  --panel: #0d180d;
  --panel-soft: #0f1c0f;
  --input-bg: #061008;
  --border: #1a3d22;
  --bevel-tl: #2a6040;
  --bevel-br: #050805;
  --text: #b4ffb4;
  --text-muted: #7adf8a;
  --text-faint: #5abf70;
  --title-basic: linear-gradient(90deg, #0a2810 0%, #0d3a18 100%);
  --title-detail: linear-gradient(90deg, #102008 0%, #1a3810 100%);
  --title-bar-fg: #c8ffc8;
  --surface-heading: #7fff9a;
  --focus: #00ff66;
  --tray-bg: #0a180c;
  --tray-active: #143820;
  --menu-bg: #0d180d;
  --taskbar-bg: linear-gradient(180deg, #0f2214 0%, #081008 100%);
  --taskbar-fg: #b4ffb4;
  --wizard-frame: #1a5a30;
  --shadow-deep: rgba(0, 255, 80, 0.12);
  --font-ui: ui-monospace, "IBM Plex Mono", Consolas, monospace;
}

html[data-skin="crt"] body {
  text-shadow: 0 0 1px rgba(0, 255, 100, 0.25);
}

/* Matrix night */
html[data-skin="matrix"] {
  --desk: #000000;
  --panel: #020802;
  --panel-soft: #041004;
  --input-bg: #000800;
  --border: #003300;
  --bevel-tl: #00aa00;
  --bevel-br: #001a00;
  --text: #00ff41;
  --text-muted: #00cc33;
  --text-faint: #009922;
  --title-basic: linear-gradient(90deg, #001100 0%, #002200 100%);
  --title-detail: linear-gradient(90deg, #080018 0%, #101028 100%);
  --title-bar-fg: #00ff41;
  --surface-heading: #39ff14;
  --focus: #00ff41;
  --tray-bg: #001100;
  --tray-active: #003300;
  --menu-bg: #020802;
  --taskbar-bg: linear-gradient(180deg, #001a00 0%, #000000 100%);
  --taskbar-fg: #00ff41;
  --wizard-frame: #00aa00;
  --shadow-deep: rgba(0, 255, 65, 0.15);
  --font-ui: ui-monospace, Consolas, monospace;
}

html[data-skin="matrix"] .window.wizard {
  box-shadow:
    0 0 0 1px rgba(0, 255, 65, 0.2),
    6px 6px 0 rgba(0, 40, 0, 0.8);
}

/* Corporate neutral */
html[data-skin="corporate"] {
  --desk: #e8ecf1;
  --panel: #ffffff;
  --panel-soft: #f5f7fa;
  --input-bg: #ffffff;
  --border: #d9dee6;
  --bevel-tl: #ffffff;
  --bevel-br: #c5ccd6;
  --text: #1f2937;
  --text-muted: #4b5563;
  --title-basic: linear-gradient(180deg, #1e40af 0%, #1d4ed8 100%);
  --title-detail: linear-gradient(180deg, #5b21b6 0%, #6d28d9 100%);
  --title-bar-fg: #ffffff;
  --surface-heading: #1e40af;
  --focus: #2563eb;
  --tray-bg: #eef2f7;
  --tray-active: #dbeafe;
  --menu-bg: #ffffff;
  --taskbar-bg: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  --taskbar-fg: #1f2937;
  --wizard-frame: #cbd5e1;
  --shadow-deep: rgba(15, 23, 42, 0.08);
  --font-ui: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

html[data-skin="corporate"] .window.wizard {
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
}

html[data-skin="corporate"] button.default {
  border-radius: 6px;
}

/* Dark theme + non-dark-native skins: keep readable surfaces */
html[data-theme="dark"][data-skin="xp-luna"],
html[data-theme="dark"][data-skin="office2000"],
html[data-theme="dark"][data-skin="notion"],
html[data-theme="dark"][data-skin="glass"],
html[data-theme="dark"][data-skin="corporate"] {
  --panel: #2a2d34;
  --panel-soft: #32363e;
  --input-bg: #1a1d22;
  --text: #eceef2;
  --text-muted: #b4bac6;
  --border: #4a505c;
  --bevel-tl: #505868;
  --bevel-br: #121418;
  --menu-bg: #2a2d34;
  --tray-bg: #363a44;
  --tray-active: #454a56;
}

html[data-theme="dark"][data-skin="glass"] body {
  background-image: linear-gradient(165deg, #1a202c 0%, #2d3748 100%);
}

html[data-theme="dark"][data-skin="notion"] .group-title {
  color: var(--text);
}

/* FAQ panel — match .window.wizard skin extras per theme */
html[data-skin="xp-luna"] .window.tools-faq-window {
  border-radius: 6px 6px 0 0;
}

html[data-skin="office2000"] .window.tools-faq-window {
  box-shadow: none;
}

html[data-skin="brutalist"] .window.tools-faq-window {
  border-width: 3px;
  border-radius: 0;
  box-shadow: none;
}

@supports (backdrop-filter: blur(8px)) {
  html[data-skin="glass"] .window.tools-faq-window {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

html[data-skin="matrix"] .window.tools-faq-window {
  box-shadow:
    0 0 0 1px rgba(0, 255, 65, 0.2),
    6px 6px 0 rgba(0, 40, 0, 0.8);
}

html[data-skin="corporate"] .window.tools-faq-window {
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
}