/* =========================================================
   LP STUDIO — Theme Definitions
   Uses design tokens defined in editor.css
   ========================================================= */

/* ---- Theme: Pop ---- */
:root[data-theme="pop"] {
    --primary: #ff7300;
    --bg-body: #fff6eb;
    --bg-sidebar: #ffebd6;
    --bg-surface: #fff0de;
    --bg-surface-hover: #ffe7cc;
    --bg-muted: #fff3e3;
    --border: #ffb370;
    --border-light: #ffcc99;
    --border-focus: #ff7300;
    --text-main: #4a2000;
    --text-muted: #994500;
    --text-dim: #cc8a50;
    --text-placeholder: #e0a870;
    --shadow-color: rgba(255, 115, 0, 0.3);
}

/* ---- Theme: Sweet ---- */
:root[data-theme="sweet"] {
    --primary: #ff8e9b;
    --bg-body: #fff0f3;
    --bg-sidebar: #ffe3e8;
    --bg-surface: #ffebee;
    --bg-surface-hover: #ffdde2;
    --bg-muted: #ffeef1;
    --border: #ffb6c1;
    --border-light: #ffcdd5;
    --border-focus: #ff8e9b;
    --text-main: #8a5a63;
    --text-muted: #c49ba2;
    --text-dim: #d4b0b6;
    --text-placeholder: #e0c0c5;
    --shadow-color: rgba(255, 142, 155, 0.4);
}

/* ---- Theme: Hard ---- */
:root[data-theme="hard"] {
    --primary: #ff0000;
    --bg-body: #111111;
    --bg-sidebar: #1a1a1a;
    --bg-surface: #222222;
    --bg-surface-hover: #2a2a2a;
    --bg-muted: #181818;
    --border: #444444;
    --border-light: #333333;
    --border-focus: #ff0000;
    --text-main: #ffffff;
    --text-muted: #999999;
    --text-dim: #666666;
    --text-placeholder: #555555;
    --shadow-color: rgba(255, 0, 0, 0.5);
}

/* ---- Theme: Rock ---- */
:root[data-theme="rock"] {
    --primary: #7800ff;
    --bg-body: #0d001a;
    --bg-sidebar: #150028;
    --bg-surface: #1a0033;
    --bg-surface-hover: #220040;
    --bg-muted: #120020;
    --border: #330066;
    --border-light: #250050;
    --border-focus: #7800ff;
    --text-main: #e6ccff;
    --text-muted: #b366ff;
    --text-dim: #7733cc;
    --text-placeholder: #5a2699;
    --shadow-color: #7800ff;
}

/* ---- Theme: System ---- */
:root[data-theme="system"] {
    --primary: #00ff00;
    --bg-body: #000000;
    --bg-sidebar: #000000;
    --bg-surface: #050505;
    --bg-surface-hover: #0a0a0a;
    --bg-muted: #030303;
    --border: #004400;
    --border-light: #003300;
    --border-focus: #00ff00;
    --text-main: #00ff00;
    --text-muted: #00cc00;
    --text-dim: #009900;
    --text-placeholder: #006600;
    --shadow-color: rgba(0, 255, 0, 0.4);
}

/* =========================================================
   Generic Tailwind class overrides for all non-default themes
   ========================================================= */

:root[data-theme]:not([data-theme="default"]) .bg-white,
:root[data-theme]:not([data-theme="default"]) #modal-content,
:root[data-theme]:not([data-theme="default"]) .section-item {
    background-color: var(--bg-body) !important;
}

:root[data-theme]:not([data-theme="default"]) .bg-gray-50,
:root[data-theme]:not([data-theme="default"]) .bg-gray-100,
:root[data-theme]:not([data-theme="default"]) .bg-\[\#f8f9fa\],
:root[data-theme]:not([data-theme="default"]) .bg-\[\#f1f5f9\],
:root[data-theme]:not([data-theme="default"]) .bg-slate-50,
:root[data-theme]:not([data-theme="default"]) .bg-slate-50\/5 {
    background-color: var(--bg-sidebar) !important;
}

:root[data-theme]:not([data-theme="default"]) .bg-black {
    background-color: var(--primary) !important;
    color: var(--bg-body) !important;
}

:root[data-theme]:not([data-theme="default"]) .text-white {
    color: var(--bg-body) !important;
}
:root[data-theme]:not([data-theme="default"]) .text-black {
    color: var(--primary) !important;
}
:root[data-theme]:not([data-theme="default"]) .text-gray-800 {
    color: var(--text-main) !important;
}
:root[data-theme]:not([data-theme="default"]) .text-gray-600,
:root[data-theme]:not([data-theme="default"]) .text-slate-400,
:root[data-theme]:not([data-theme="default"]) .text-slate-500,
:root[data-theme]:not([data-theme="default"]) .text-\[\#64748b\] {
    color: var(--text-muted) !important;
}
:root[data-theme]:not([data-theme="default"]) .text-gray-400,
:root[data-theme]:not([data-theme="default"]) .text-gray-300,
:root[data-theme]:not([data-theme="default"]) .text-slate-300,
:root[data-theme]:not([data-theme="default"]) .text-slate-200 {
    color: var(--text-dim) !important;
}

:root[data-theme]:not([data-theme="default"]) .border-gray-300,
:root[data-theme]:not([data-theme="default"]) .border-gray-200,
:root[data-theme]:not([data-theme="default"]) .border-gray-100,
:root[data-theme]:not([data-theme="default"]) .border-gray-800,
:root[data-theme]:not([data-theme="default"]) .border-slate-100,
:root[data-theme]:not([data-theme="default"]) .border-black\/20,
:root[data-theme]:not([data-theme="default"]) .border-black\/5 {
    border-color: var(--border) !important;
}

:root[data-theme]:not([data-theme="default"]) header {
    border-color: var(--border) !important;
}

/* Slate palette (CMS) unified with gray palette */
:root[data-theme]:not([data-theme="default"]) .bg-slate-100,
:root[data-theme]:not([data-theme="default"]) .bg-slate-200 {
    background-color: var(--bg-surface) !important;
}

:root[data-theme]:not([data-theme="default"]) .ring-black\/5 {
    --tw-ring-color: var(--border) !important;
}

/* =========================================================
   Theme-specific style overrides
   ========================================================= */

/* ---- Pop: Rounded, bold, playful font ---- */
[data-theme="pop"] body,
[data-theme="pop"] button,
[data-theme="pop"] input,
[data-theme="pop"] select,
[data-theme="pop"] textarea {
    font-family: 'Comic Sans MS', 'M PLUS Rounded 1c', 'Nunito', sans-serif !important;
}
[data-theme="pop"] *:not(path):not(circle):not(polyline):not(line):not(rect):not(svg):not(iframe) {
    border-radius: var(--radius-lg) !important;
}
[data-theme="pop"] button {
    border-radius: var(--radius-full) !important;
}
[data-theme="pop"] .section-item,
[data-theme="pop"] .sitemap-area,
[data-theme="pop"] .list-item-drag,
[data-theme="pop"] #modal-content {
    border-radius: var(--radius-xl) !important;
}
[data-theme="pop"] #preview-frame {
    border-radius: 30px 30px 0 0 !important;
}
[data-theme="pop"] header,
[data-theme="pop"] #sidebar {
    background: linear-gradient(135deg, var(--bg-body), var(--bg-sidebar)) !important;
}

/* ---- Sweet: Soft corners, pastel, drop shadows ---- */
[data-theme="sweet"] body,
[data-theme="sweet"] button,
[data-theme="sweet"] input,
[data-theme="sweet"] select,
[data-theme="sweet"] textarea {
    font-family: 'Quicksand', 'Hannotate SC', sans-serif !important;
}
[data-theme="sweet"] *:not(path):not(circle):not(polyline):not(line):not(rect):not(svg):not(iframe) {
    border-radius: 24px !important;
}
[data-theme="sweet"] .section-item {
    box-shadow: 0 10px 25px var(--shadow-color) !important;
    border: 2px solid white !important;
}
[data-theme="sweet"] #preview-frame {
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -10px 30px var(--shadow-color) !important;
    border: 4px solid white;
    border-bottom: none;
}

/* ---- Hard: Sharp corners, solid, high contrast ---- */
[data-theme="hard"] body,
[data-theme="hard"] button,
[data-theme="hard"] input,
[data-theme="hard"] select,
[data-theme="hard"] textarea {
    font-family: 'Arial Black', 'Impact', sans-serif !important;
    font-weight: 800;
    letter-spacing: 0.5px;
}
[data-theme="hard"] *:not(path):not(circle):not(polyline):not(line):not(rect):not(svg):not(iframe) {
    border-radius: 0 !important;
}
[data-theme="hard"] .section-item {
    box-shadow: 4px 4px 0px var(--primary) !important;
    border: 2px solid var(--border) !important;
}
[data-theme="hard"] header {
    border-bottom: 4px solid var(--primary) !important;
}

/* ---- Rock: Dark, neon accent ---- */
[data-theme="rock"] body,
[data-theme="rock"] button,
[data-theme="rock"] input,
[data-theme="rock"] select,
[data-theme="rock"] textarea {
    font-family: 'Courier New', monospace !important;
    text-transform: uppercase;
    font-weight: bold !important;
}
[data-theme="rock"] *:not(path):not(circle):not(polyline):not(line):not(rect):not(svg):not(iframe) {
    border-radius: 0 !important;
}
[data-theme="rock"] .section-item,
[data-theme="rock"] button,
[data-theme="rock"] input {
    box-shadow: 6px 6px 0px var(--primary) !important;
    border: 2px solid var(--primary) !important;
}
[data-theme="rock"] header {
    border-bottom: 6px solid var(--primary) !important;
}
[data-theme="rock"] svg {
    color: var(--primary) !important;
}
[data-theme="rock"] #modal-content,
[data-theme="rock"] .section-item,
[data-theme="rock"] input,
[data-theme="rock"] select {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
}

/* ---- System: Terminal, hacker ---- */
[data-theme="system"] body,
[data-theme="system"] button,
[data-theme="system"] input,
[data-theme="system"] select,
[data-theme="system"] textarea {
    font-family: 'Consolas', 'Courier New', monospace !important;
    letter-spacing: 1.5px;
}
[data-theme="system"] *:not(path):not(circle):not(polyline):not(line):not(rect):not(svg):not(iframe) {
    border-radius: 0 !important;
}
[data-theme="system"] .section-item,
[data-theme="system"] button,
[data-theme="system"] input,
[data-theme="system"] .sitemap-item {
    border: 1px dashed var(--primary) !important;
    background: rgba(0, 255, 0, 0.02) !important;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.1) inset !important;
}
[data-theme="system"] header,
[data-theme="system"] #sidebar {
    border-color: var(--primary) !important;
    border-style: dashed !important;
    border-width: 1px !important;
}
[data-theme="system"] svg {
    color: var(--primary) !important;
}
[data-theme="system"] .text-gray-800,
[data-theme="system"] .text-black,
[data-theme="system"] .text-gray-600 {
    color: var(--primary) !important;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}
[data-theme="system"] .bg-black {
    background-color: var(--primary) !important;
    color: #000 !important;
    text-shadow: none;
}

/* =========================================================
   Dark theme background unification
   ========================================================= */

:root[data-theme="hard"] .section-header,
:root[data-theme="rock"] .section-header,
:root[data-theme="system"] .section-header,
:root[data-theme="hard"] .section-header:hover,
:root[data-theme="rock"] .section-header:hover,
:root[data-theme="system"] .section-header:hover,
:root[data-theme="hard"] .section-item.expanded .section-header,
:root[data-theme="rock"] .section-item.expanded .section-header,
:root[data-theme="system"] .section-item.expanded .section-header,
:root[data-theme="hard"] .section-item.disabled .section-header,
:root[data-theme="rock"] .section-item.disabled .section-header,
:root[data-theme="system"] .section-item.disabled .section-header,
:root[data-theme="hard"] .list-item-drag,
:root[data-theme="rock"] .list-item-drag,
:root[data-theme="system"] .list-item-drag,
:root[data-theme="hard"] [class*="bg-gray-50"],
:root[data-theme="rock"] [class*="bg-gray-50"],
:root[data-theme="system"] [class*="bg-gray-50"],
:root[data-theme="hard"] [class*="bg-white"],
:root[data-theme="rock"] [class*="bg-white"],
:root[data-theme="system"] [class*="bg-white"] {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

:root[data-theme="hard"] #preview-area,
:root[data-theme="rock"] #preview-area,
:root[data-theme="system"] #preview-area,
:root[data-theme="hard"] .section-content,
:root[data-theme="rock"] .section-content,
:root[data-theme="system"] .section-content,
:root[data-theme="hard"] .sitemap-area,
:root[data-theme="rock"] .sitemap-area,
:root[data-theme="system"] .sitemap-area {
    background-color: var(--bg-sidebar) !important;
}

:root[data-theme="hard"] .sitemap-item:not(.active),
:root[data-theme="rock"] .sitemap-item:not(.active),
:root[data-theme="system"] .sitemap-item:not(.active) {
    background-color: transparent !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

:root[data-theme="hard"] .sitemap-item.active,
:root[data-theme="rock"] .sitemap-item.active,
:root[data-theme="system"] .sitemap-item.active {
    background-color: transparent !important;
    border-color: var(--primary) !important;
}

/* CMS specific dark theme */
:root[data-theme="hard"] .bg-slate-50,
:root[data-theme="rock"] .bg-slate-50,
:root[data-theme="system"] .bg-slate-50 {
    background-color: var(--bg-sidebar) !important;
}