/* ═══════ MULTI-STYLE THEME VARIABLES ═══════ */
[data-style="modern-tech"][data-theme="dark"],
[data-style="modern-tech"].dark,
[data-style="modern-tech"] {
  --bg-primary: #0a0a0a;
  --bg-secondary: #1a1a2e;
  --bg-card: rgba(255,255,255,0.03);
  --bg-card-hover: rgba(255,255,255,0.06);
  --text-heading: #f4f4f5;
  --text-body: #a1a1aa;
  --text-muted: #71717a;
  --accent: #60a5fa;
  --accent-secondary: #a78bfa;
  --accent-tertiary: #34d399;
  --border: rgba(255,255,255,0.08);
  --border-emphasis: rgba(255,255,255,0.15);
  --shadow: 0 8px 32px rgba(0,0,0,0.3);
  --shadow-accent: 0 0 30px rgba(96,165,250,0.1);
  --radius: 16px;
  --radius-sm: 8px;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --nav-bg: rgba(10,10,10,0.8);
  --nav-border: rgba(255,255,255,0.06);
  --btn-bg: #60a5fa;
  --btn-text: #ffffff;
  --btn-hover: #3b82f6;
  --section-alt: #0f0f1a;
  --footer-bg: #050505;
  --glass-blur: blur(20px);
  --ornament-display: none;
}

[data-style="modern-tech"][data-theme="light"],
[data-style="modern-tech"]:not(.dark) {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-card: rgba(0,0,0,0.02);
  --bg-card-hover: rgba(0,0,0,0.04);
  --text-heading: #0f172a;
  --text-body: #475569;
  --text-muted: #94a3b8;
  --accent: #3b82f6;
  --accent-secondary: #7c3aed;
  --accent-tertiary: #10b981;
  --border: rgba(0,0,0,0.08);
  --border-emphasis: rgba(0,0,0,0.15);
  --shadow: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-accent: 0 0 20px rgba(59,130,246,0.08);
  --radius: 16px;
  --radius-sm: 8px;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --nav-bg: rgba(255,255,255,0.9);
  --nav-border: rgba(0,0,0,0.06);
  --btn-bg: #3b82f6;
  --btn-text: #ffffff;
  --btn-hover: #2563eb;
  --section-alt: #f1f5f9;
  --footer-bg: #0f172a;
  --glass-blur: blur(20px);
  --ornament-display: none;
}

[data-style="professional"][data-theme="dark"],
[data-style="professional"].dark,
[data-style="professional"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-card: #1e293b;
  --bg-card-hover: #334155;
  --text-heading: #f1f5f9;
  --text-body: #cbd5e1;
  --text-muted: #94a3b8;
  --accent: #3b82f6;
  --accent-secondary: #2563eb;
  --accent-tertiary: #1e40af;
  --border: #334155;
  --border-emphasis: #475569;
  --shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-accent: none;
  --radius: 8px;
  --radius-sm: 6px;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  --nav-bg: #0f172a;
  --nav-border: #1e293b;
  --btn-bg: #2563eb;
  --btn-text: #ffffff;
  --btn-hover: #1d4ed8;
  --section-alt: #1e293b;
  --footer-bg: #020617;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="professional"][data-theme="light"],
[data-style="professional"]:not(.dark) {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --text-heading: #0f172a;
  --text-body: #334155;
  --text-muted: #64748b;
  --accent: #2563eb;
  --accent-secondary: #1e40af;
  --accent-tertiary: #3b82f6;
  --border: #e2e8f0;
  --border-emphasis: #cbd5e1;
  --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-accent: none;
  --radius: 8px;
  --radius-sm: 6px;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  --nav-bg: #ffffff;
  --nav-border: #e2e8f0;
  --btn-bg: #2563eb;
  --btn-text: #ffffff;
  --btn-hover: #1d4ed8;
  --section-alt: #f8fafc;
  --footer-bg: #0f172a;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="classic-elegant"][data-theme="dark"],
[data-style="classic-elegant"].dark,
[data-style="classic-elegant"] {
  --bg-primary: #1a1410;
  --bg-secondary: #231e19;
  --bg-card: #2a2420;
  --bg-card-hover: #342d28;
  --text-heading: #f5e6c8;
  --text-body: #c9b99a;
  --text-muted: #8a7e76;
  --accent: #d4a574;
  --accent-secondary: #b8860b;
  --accent-tertiary: #8b6914;
  --border: rgba(184,134,11,0.2);
  --border-emphasis: rgba(184,134,11,0.35);
  --shadow: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-accent: none;
  --radius: 4px;
  --radius-sm: 2px;
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'EB Garamond', serif;
  --nav-bg: #1a1410;
  --nav-border: rgba(184,134,11,0.15);
  --btn-bg: #b8860b;
  --btn-text: #ffffff;
  --btn-hover: #d4a574;
  --section-alt: #231e19;
  --footer-bg: #0f0c09;
  --glass-blur: none;
  --ornament-display: block;
}

[data-style="classic-elegant"][data-theme="light"],
[data-style="classic-elegant"]:not(.dark) {
  --bg-primary: #faf8f5;
  --bg-secondary: #f5f0eb;
  --bg-card: #fffef9;
  --bg-card-hover: #faf5ed;
  --text-heading: #2d2421;
  --text-body: #5c4f47;
  --text-muted: #8a7e76;
  --accent: #b8860b;
  --accent-secondary: #d4a574;
  --accent-tertiary: #8b6914;
  --border: rgba(184,134,11,0.15);
  --border-emphasis: rgba(45,36,33,0.15);
  --shadow: 0 2px 8px rgba(45,36,33,0.06);
  --shadow-accent: none;
  --radius: 4px;
  --radius-sm: 2px;
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'EB Garamond', serif;
  --nav-bg: #faf8f5;
  --nav-border: rgba(184,134,11,0.12);
  --btn-bg: #b8860b;
  --btn-text: #ffffff;
  --btn-hover: #8b6914;
  --section-alt: #f5f0eb;
  --footer-bg: #2d2421;
  --glass-blur: none;
  --ornament-display: block;
}

[data-style="creative-bold"][data-theme="dark"],
[data-style="creative-bold"].dark,
[data-style="creative-bold"] {
  --bg-primary: #0a0a0b;
  --bg-secondary: #18181b;
  --bg-card: #1c1c1f;
  --bg-card-hover: #27272a;
  --text-heading: #fafafa;
  --text-body: #d4d4d8;
  --text-muted: #a1a1aa;
  --accent: #f43f5e;
  --accent-secondary: #8b5cf6;
  --accent-tertiary: #06b6d4;
  --border: #27272a;
  --border-emphasis: #3f3f46;
  --shadow: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-accent: 0 8px 24px rgba(244,63,94,0.15);
  --radius: 16px;
  --radius-sm: 12px;
  --font-heading: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --nav-bg: #0a0a0b;
  --nav-border: #27272a;
  --btn-bg: #f43f5e;
  --btn-text: #ffffff;
  --btn-hover: #e11d48;
  --section-alt: #18181b;
  --footer-bg: #050505;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="creative-bold"][data-theme="light"],
[data-style="creative-bold"]:not(.dark) {
  --bg-primary: #ffffff;
  --bg-secondary: #fafafa;
  --bg-card: #ffffff;
  --bg-card-hover: #fafafa;
  --text-heading: #18181b;
  --text-body: #3f3f46;
  --text-muted: #71717a;
  --accent: #f43f5e;
  --accent-secondary: #8b5cf6;
  --accent-tertiary: #06b6d4;
  --border: #e4e4e7;
  --border-emphasis: #d4d4d8;
  --shadow: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-accent: 0 8px 24px rgba(244,63,94,0.15);
  --radius: 16px;
  --radius-sm: 12px;
  --font-heading: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --nav-bg: #ffffff;
  --nav-border: #e4e4e7;
  --btn-bg: #f43f5e;
  --btn-text: #ffffff;
  --btn-hover: #e11d48;
  --section-alt: #fafafa;
  --footer-bg: #18181b;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="minimal-clean"][data-theme="dark"],
[data-style="minimal-clean"].dark,
[data-style="minimal-clean"] {
  --bg-primary: #111111;
  --bg-secondary: #1a1a1a;
  --bg-card: #1a1a1a;
  --bg-card-hover: #222222;
  --text-heading: #f9fafb;
  --text-body: #d1d5db;
  --text-muted: #9ca3af;
  --accent: #f9fafb;
  --accent-secondary: #e5e7eb;
  --accent-tertiary: #9ca3af;
  --border: #222222;
  --border-emphasis: #374151;
  --shadow: none;
  --shadow-accent: none;
  --radius: 4px;
  --radius-sm: 2px;
  --font-heading: 'DM Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --nav-bg: #111111;
  --nav-border: #222222;
  --btn-bg: #f9fafb;
  --btn-text: #111111;
  --btn-hover: #e5e7eb;
  --section-alt: #1a1a1a;
  --footer-bg: #0a0a0a;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="minimal-clean"][data-theme="light"],
[data-style="minimal-clean"]:not(.dark) {
  --bg-primary: #ffffff;
  --bg-secondary: #fafafa;
  --bg-card: #ffffff;
  --bg-card-hover: #fafafa;
  --text-heading: #111827;
  --text-body: #374151;
  --text-muted: #9ca3af;
  --accent: #111827;
  --accent-secondary: #374151;
  --accent-tertiary: #6366f1;
  --border: #f3f4f6;
  --border-emphasis: #e5e7eb;
  --shadow: none;
  --shadow-accent: none;
  --radius: 4px;
  --radius-sm: 2px;
  --font-heading: 'DM Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --nav-bg: #ffffff;
  --nav-border: #f3f4f6;
  --btn-bg: #111827;
  --btn-text: #ffffff;
  --btn-hover: #374151;
  --section-alt: #fafafa;
  --footer-bg: #111827;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="nature-organic"][data-theme="dark"],
[data-style="nature-organic"].dark,
[data-style="nature-organic"] {
  --bg-primary: #1a2218;
  --bg-secondary: #222d20;
  --bg-card: #263026;
  --bg-card-hover: #2f3a2e;
  --text-heading: #d4e6d0;
  --text-body: #a8bca6;
  --text-muted: #7a8a7c;
  --accent: #52b788;
  --accent-secondary: #2d6a4f;
  --accent-tertiary: #d4a373;
  --border: rgba(82,183,136,0.15);
  --border-emphasis: rgba(82,183,136,0.3);
  --shadow: 0 2px 12px rgba(0,0,0,0.25);
  --shadow-accent: none;
  --radius: 12px;
  --radius-sm: 8px;
  --font-heading: 'Fraunces', serif;
  --font-body: 'Source Sans 3', sans-serif;
  --nav-bg: #1a2218;
  --nav-border: rgba(82,183,136,0.12);
  --btn-bg: #2d6a4f;
  --btn-text: #ffffff;
  --btn-hover: #52b788;
  --section-alt: #222d20;
  --footer-bg: #111a10;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="nature-organic"][data-theme="light"],
[data-style="nature-organic"]:not(.dark) {
  --bg-primary: #f7f5f0;
  --bg-secondary: #eae6dd;
  --bg-card: #fdfcf8;
  --bg-card-hover: #f5f2eb;
  --text-heading: #1a2e1c;
  --text-body: #4a5a4c;
  --text-muted: #7a8a7c;
  --accent: #2d6a4f;
  --accent-secondary: #52b788;
  --accent-tertiary: #d4a373;
  --border: rgba(45,106,79,0.12);
  --border-emphasis: rgba(26,46,28,0.15);
  --shadow: 0 2px 12px rgba(26,46,28,0.06);
  --shadow-accent: none;
  --radius: 12px;
  --radius-sm: 8px;
  --font-heading: 'Fraunces', serif;
  --font-body: 'Source Sans 3', sans-serif;
  --nav-bg: #f7f5f0;
  --nav-border: rgba(45,106,79,0.1);
  --btn-bg: #2d6a4f;
  --btn-text: #ffffff;
  --btn-hover: #1b4332;
  --section-alt: #eae6dd;
  --footer-bg: #2c3a2e;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="startup-saas"][data-theme="dark"],
[data-style="startup-saas"].dark,
[data-style="startup-saas"] {
  --bg-primary: #0f0f1a;
  --bg-secondary: #1a1a2e;
  --bg-card: #1e1e35;
  --bg-card-hover: #28284a;
  --text-heading: #f9fafb;
  --text-body: #d1d5db;
  --text-muted: #9ca3af;
  --accent: #818cf8;
  --accent-secondary: #a78bfa;
  --accent-tertiary: #f472b6;
  --border: #2e2e4a;
  --border-emphasis: #4338ca;
  --shadow: 0 4px 6px rgba(0,0,0,0.3);
  --shadow-accent: 0 4px 15px rgba(99,102,241,0.2);
  --radius: 12px;
  --radius-sm: 8px;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --nav-bg: #0f0f1a;
  --nav-border: #2e2e4a;
  --btn-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
  --btn-text: #ffffff;
  --btn-hover: linear-gradient(135deg, #4f46e5, #7c3aed);
  --section-alt: #1a1a2e;
  --footer-bg: #080812;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="startup-saas"][data-theme="light"],
[data-style="startup-saas"]:not(.dark) {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-card: #ffffff;
  --bg-card-hover: #f9fafb;
  --text-heading: #111827;
  --text-body: #4b5563;
  --text-muted: #9ca3af;
  --accent: #6366f1;
  --accent-secondary: #8b5cf6;
  --accent-tertiary: #ec4899;
  --border: #e5e7eb;
  --border-emphasis: #d1d5db;
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-accent: 0 4px 15px rgba(99,102,241,0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --nav-bg: #ffffff;
  --nav-border: #e5e7eb;
  --btn-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
  --btn-text: #ffffff;
  --btn-hover: linear-gradient(135deg, #4f46e5, #7c3aed);
  --section-alt: #f9fafb;
  --footer-bg: #111827;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="dark-luxury"][data-theme="dark"],
[data-style="dark-luxury"].dark,
[data-style="dark-luxury"] {
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-card: #1a1a1a;
  --bg-card-hover: #222222;
  --text-heading: #f5f0e8;
  --text-body: #b8b0a4;
  --text-muted: #7a756e;
  --accent: #c9a84c;
  --accent-secondary: #e8d48b;
  --accent-tertiary: #a08030;
  --border: rgba(201,168,76,0.15);
  --border-emphasis: rgba(201,168,76,0.35);
  --shadow: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-accent: 0 0 20px rgba(201,168,76,0.08);
  --radius: 2px;
  --radius-sm: 0px;
  --font-heading: 'Cinzel', serif;
  --font-body: 'Raleway', sans-serif;
  --nav-bg: #0a0a0a;
  --nav-border: rgba(201,168,76,0.1);
  --btn-bg: transparent;
  --btn-text: #c9a84c;
  --btn-hover: #c9a84c;
  --section-alt: #111111;
  --footer-bg: #050505;
  --glass-blur: none;
  --ornament-display: block;
}

[data-style="dark-luxury"][data-theme="light"],
[data-style="dark-luxury"]:not(.dark) {
  --bg-primary: #faf8f4;
  --bg-secondary: #f0ece4;
  --bg-card: #ffffff;
  --bg-card-hover: #faf8f4;
  --text-heading: #1a1608;
  --text-body: #4a4538;
  --text-muted: #7a756e;
  --accent: #a08030;
  --accent-secondary: #c9a84c;
  --accent-tertiary: #8a6820;
  --border: rgba(160,128,48,0.15);
  --border-emphasis: rgba(160,128,48,0.3);
  --shadow: 0 2px 12px rgba(26,22,8,0.06);
  --shadow-accent: none;
  --radius: 2px;
  --radius-sm: 0px;
  --font-heading: 'Cinzel', serif;
  --font-body: 'Raleway', sans-serif;
  --nav-bg: #faf8f4;
  --nav-border: rgba(160,128,48,0.12);
  --btn-bg: #a08030;
  --btn-text: #ffffff;
  --btn-hover: #8a6820;
  --section-alt: #f0ece4;
  --footer-bg: #1a1608;
  --glass-blur: none;
  --ornament-display: block;
}

[data-style="playful-friendly"][data-theme="dark"],
[data-style="playful-friendly"].dark,
[data-style="playful-friendly"] {
  --bg-primary: #1a1230;
  --bg-secondary: #231a40;
  --bg-card: #2a2050;
  --bg-card-hover: #332860;
  --text-heading: #e8deff;
  --text-body: #c4b5e8;
  --text-muted: #8b7fb8;
  --accent: #ff6b6b;
  --accent-secondary: #4ecdc4;
  --accent-tertiary: #ffe66d;
  --border: rgba(168,139,250,0.15);
  --border-emphasis: rgba(168,139,250,0.3);
  --shadow: 0 4px 16px rgba(0,0,0,0.3);
  --shadow-accent: 0 4px 16px rgba(255,107,107,0.15);
  --radius: 20px;
  --radius-sm: 12px;
  --font-heading: 'Nunito', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --nav-bg: #1a1230;
  --nav-border: rgba(168,139,250,0.12);
  --btn-bg: #ff6b6b;
  --btn-text: #ffffff;
  --btn-hover: #ee5a5a;
  --section-alt: #231a40;
  --footer-bg: #110c22;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="playful-friendly"][data-theme="light"],
[data-style="playful-friendly"]:not(.dark) {
  --bg-primary: #fffbf5;
  --bg-secondary: #fff4e6;
  --bg-card: #ffffff;
  --bg-card-hover: #fffbf5;
  --text-heading: #2d1b69;
  --text-body: #5a4a8a;
  --text-muted: #8b7fb8;
  --accent: #ff6b6b;
  --accent-secondary: #4ecdc4;
  --accent-tertiary: #ffe66d;
  --border: rgba(45,27,105,0.08);
  --border-emphasis: rgba(45,27,105,0.15);
  --shadow: 0 4px 16px rgba(45,27,105,0.08);
  --shadow-accent: 0 4px 16px rgba(255,107,107,0.1);
  --radius: 20px;
  --radius-sm: 12px;
  --font-heading: 'Nunito', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --nav-bg: #fffbf5;
  --nav-border: rgba(45,27,105,0.06);
  --btn-bg: #ff6b6b;
  --btn-text: #ffffff;
  --btn-hover: #ee5a5a;
  --section-alt: #fff4e6;
  --footer-bg: #2d1b69;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="brutalist-raw"][data-theme="dark"],
[data-style="brutalist-raw"].dark,
[data-style="brutalist-raw"] {
  --bg-primary: #000000;
  --bg-secondary: #111111;
  --bg-card: #111111;
  --bg-card-hover: #1a1a1a;
  --text-heading: #ffffff;
  --text-body: #cccccc;
  --text-muted: #888888;
  --accent: #ff0000;
  --accent-secondary: #ffffff;
  --accent-tertiary: #ff0000;
  --border: #ffffff;
  --border-emphasis: #ff0000;
  --shadow: none;
  --shadow-accent: none;
  --radius: 0px;
  --radius-sm: 0px;
  --font-heading: 'Space Mono', monospace;
  --font-body: 'Space Mono', monospace;
  --nav-bg: #000000;
  --nav-border: #ffffff;
  --btn-bg: #ffffff;
  --btn-text: #000000;
  --btn-hover: #ff0000;
  --section-alt: #111111;
  --footer-bg: #000000;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="brutalist-raw"][data-theme="light"],
[data-style="brutalist-raw"]:not(.dark) {
  --bg-primary: #ffffff;
  --bg-secondary: #f0f0f0;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f0f0;
  --text-heading: #000000;
  --text-body: #333333;
  --text-muted: #666666;
  --accent: #ff0000;
  --accent-secondary: #000000;
  --accent-tertiary: #ff0000;
  --border: #000000;
  --border-emphasis: #ff0000;
  --shadow: none;
  --shadow-accent: none;
  --radius: 0px;
  --radius-sm: 0px;
  --font-heading: 'Space Mono', monospace;
  --font-body: 'Space Mono', monospace;
  --nav-bg: #ffffff;
  --nav-border: #000000;
  --btn-bg: #000000;
  --btn-text: #ffffff;
  --btn-hover: #ff0000;
  --section-alt: #f0f0f0;
  --footer-bg: #000000;
  --glass-blur: none;
  --ornament-display: none;
}

/* ═══════ MAPPING: modern-tech ═══════ */
[data-style="modern-tech"].dark,
[data-style="modern-tech"][data-theme="dark"] {
  --color-bg: var(--bg-primary);
  --color-bg-surface: var(--bg-secondary);
  --color-heading: var(--text-heading);
  --color-sub: var(--text-heading);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-dim: var(--text-muted);
  --color-faint: var(--border);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-hover-bg: var(--bg-card-hover);
  --glass-hover-border: var(--border-emphasis);
  --ghost-bg: var(--bg-card);
  --ghost-border: var(--border);
  --ghost-hover-bg: var(--bg-card-hover);
  --ghost-hover-border: var(--border-emphasis);
  --ghost-text: var(--text-body);
  --ghost-hover-text: var(--text-heading);
  --mock-bg: var(--bg-card);
  --mock-border: var(--border);
  --divider: var(--border);
  --selection-bg: var(--accent);
  --selection-color: var(--text-heading);
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-muted);
  --donut-track: var(--border);
  --grid-color: var(--border);
  --scroll-border: var(--border-emphasis);
  --scroll-dot: var(--text-muted);
  color-scheme: dark;
}

[data-style="modern-tech"]:not(.dark),
[data-style="modern-tech"][data-theme="light"] {
  --color-bg: var(--bg-primary);
  --color-bg-surface: var(--bg-secondary);
  --color-heading: var(--text-heading);
  --color-sub: var(--text-heading);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-dim: var(--text-muted);
  --color-faint: var(--border);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-hover-bg: var(--bg-card-hover);
  --glass-hover-border: var(--border-emphasis);
  --ghost-bg: var(--bg-card);
  --ghost-border: var(--border);
  --ghost-hover-bg: var(--bg-card-hover);
  --ghost-hover-border: var(--border-emphasis);
  --ghost-text: var(--text-body);
  --ghost-hover-text: var(--text-heading);
  --mock-bg: var(--bg-card);
  --mock-border: var(--border);
  --divider: var(--border);
  --selection-bg: var(--accent);
  --selection-color: var(--text-heading);
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-muted);
  --donut-track: var(--border);
  --grid-color: var(--border);
  --scroll-border: var(--border-emphasis);
  --scroll-dot: var(--text-muted);
  color-scheme: light;
}

/* ═══════ MAPPING: professional ═══════ */
[data-style="professional"].dark,
[data-style="professional"][data-theme="dark"] {
  --color-bg: var(--bg-primary);
  --color-bg-surface: var(--bg-secondary);
  --color-heading: var(--text-heading);
  --color-sub: var(--text-heading);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-dim: var(--text-muted);
  --color-faint: var(--border);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-hover-bg: var(--bg-card-hover);
  --glass-hover-border: var(--border-emphasis);
  --ghost-bg: var(--bg-card);
  --ghost-border: var(--border);
  --ghost-hover-bg: var(--bg-card-hover);
  --ghost-hover-border: var(--border-emphasis);
  --ghost-text: var(--text-body);
  --ghost-hover-text: var(--text-heading);
  --mock-bg: var(--bg-card);
  --mock-border: var(--border);
  --divider: var(--border);
  --selection-bg: var(--accent);
  --selection-color: var(--text-heading);
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-muted);
  --donut-track: var(--border);
  --grid-color: var(--border);
  --scroll-border: var(--border-emphasis);
  --scroll-dot: var(--text-muted);
  color-scheme: dark;
}

[data-style="professional"]:not(.dark),
[data-style="professional"][data-theme="light"] {
  --color-bg: var(--bg-primary);
  --color-bg-surface: var(--bg-secondary);
  --color-heading: var(--text-heading);
  --color-sub: var(--text-heading);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-dim: var(--text-muted);
  --color-faint: var(--border);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-hover-bg: var(--bg-card-hover);
  --glass-hover-border: var(--border-emphasis);
  --ghost-bg: var(--bg-card);
  --ghost-border: var(--border);
  --ghost-hover-bg: var(--bg-card-hover);
  --ghost-hover-border: var(--border-emphasis);
  --ghost-text: var(--text-body);
  --ghost-hover-text: var(--text-heading);
  --mock-bg: var(--bg-card);
  --mock-border: var(--border);
  --divider: var(--border);
  --selection-bg: var(--accent);
  --selection-color: var(--text-heading);
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-muted);
  --donut-track: var(--border);
  --grid-color: var(--border);
  --scroll-border: var(--border-emphasis);
  --scroll-dot: var(--text-muted);
  color-scheme: light;
}

/* ═══════ MAPPING: classic-elegant ═══════ */
[data-style="classic-elegant"].dark,
[data-style="classic-elegant"][data-theme="dark"] {
  --color-bg: var(--bg-primary);
  --color-bg-surface: var(--bg-secondary);
  --color-heading: var(--text-heading);
  --color-sub: var(--text-heading);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-dim: var(--text-muted);
  --color-faint: var(--border);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-hover-bg: var(--bg-card-hover);
  --glass-hover-border: var(--border-emphasis);
  --ghost-bg: var(--bg-card);
  --ghost-border: var(--border);
  --ghost-hover-bg: var(--bg-card-hover);
  --ghost-hover-border: var(--border-emphasis);
  --ghost-text: var(--text-body);
  --ghost-hover-text: var(--text-heading);
  --mock-bg: var(--bg-card);
  --mock-border: var(--border);
  --divider: var(--border);
  --selection-bg: var(--accent);
  --selection-color: var(--text-heading);
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-muted);
  --donut-track: var(--border);
  --grid-color: var(--border);
  --scroll-border: var(--border-emphasis);
  --scroll-dot: var(--text-muted);
  color-scheme: dark;
}

[data-style="classic-elegant"]:not(.dark),
[data-style="classic-elegant"][data-theme="light"] {
  --color-bg: var(--bg-primary);
  --color-bg-surface: var(--bg-secondary);
  --color-heading: var(--text-heading);
  --color-sub: var(--text-heading);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-dim: var(--text-muted);
  --color-faint: var(--border);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-hover-bg: var(--bg-card-hover);
  --glass-hover-border: var(--border-emphasis);
  --ghost-bg: var(--bg-card);
  --ghost-border: var(--border);
  --ghost-hover-bg: var(--bg-card-hover);
  --ghost-hover-border: var(--border-emphasis);
  --ghost-text: var(--text-body);
  --ghost-hover-text: var(--text-heading);
  --mock-bg: var(--bg-card);
  --mock-border: var(--border);
  --divider: var(--border);
  --selection-bg: var(--accent);
  --selection-color: var(--text-heading);
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-muted);
  --donut-track: var(--border);
  --grid-color: var(--border);
  --scroll-border: var(--border-emphasis);
  --scroll-dot: var(--text-muted);
  color-scheme: light;
}

/* ═══════ MAPPING: creative-bold ═══════ */
[data-style="creative-bold"].dark,
[data-style="creative-bold"][data-theme="dark"] {
  --color-bg: var(--bg-primary);
  --color-bg-surface: var(--bg-secondary);
  --color-heading: var(--text-heading);
  --color-sub: var(--text-heading);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-dim: var(--text-muted);
  --color-faint: var(--border);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-hover-bg: var(--bg-card-hover);
  --glass-hover-border: var(--border-emphasis);
  --ghost-bg: var(--bg-card);
  --ghost-border: var(--border);
  --ghost-hover-bg: var(--bg-card-hover);
  --ghost-hover-border: var(--border-emphasis);
  --ghost-text: var(--text-body);
  --ghost-hover-text: var(--text-heading);
  --mock-bg: var(--bg-card);
  --mock-border: var(--border);
  --divider: var(--border);
  --selection-bg: var(--accent);
  --selection-color: var(--text-heading);
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-muted);
  --donut-track: var(--border);
  --grid-color: var(--border);
  --scroll-border: var(--border-emphasis);
  --scroll-dot: var(--text-muted);
  color-scheme: dark;
}

[data-style="creative-bold"]:not(.dark),
[data-style="creative-bold"][data-theme="light"] {
  --color-bg: var(--bg-primary);
  --color-bg-surface: var(--bg-secondary);
  --color-heading: var(--text-heading);
  --color-sub: var(--text-heading);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-dim: var(--text-muted);
  --color-faint: var(--border);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-hover-bg: var(--bg-card-hover);
  --glass-hover-border: var(--border-emphasis);
  --ghost-bg: var(--bg-card);
  --ghost-border: var(--border);
  --ghost-hover-bg: var(--bg-card-hover);
  --ghost-hover-border: var(--border-emphasis);
  --ghost-text: var(--text-body);
  --ghost-hover-text: var(--text-heading);
  --mock-bg: var(--bg-card);
  --mock-border: var(--border);
  --divider: var(--border);
  --selection-bg: var(--accent);
  --selection-color: var(--text-heading);
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-muted);
  --donut-track: var(--border);
  --grid-color: var(--border);
  --scroll-border: var(--border-emphasis);
  --scroll-dot: var(--text-muted);
  color-scheme: light;
}

/* ═══════ MAPPING: minimal-clean ═══════ */
[data-style="minimal-clean"].dark,
[data-style="minimal-clean"][data-theme="dark"] {
  --color-bg: var(--bg-primary);
  --color-bg-surface: var(--bg-secondary);
  --color-heading: var(--text-heading);
  --color-sub: var(--text-heading);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-dim: var(--text-muted);
  --color-faint: var(--border);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-hover-bg: var(--bg-card-hover);
  --glass-hover-border: var(--border-emphasis);
  --ghost-bg: var(--bg-card);
  --ghost-border: var(--border);
  --ghost-hover-bg: var(--bg-card-hover);
  --ghost-hover-border: var(--border-emphasis);
  --ghost-text: var(--text-body);
  --ghost-hover-text: var(--text-heading);
  --mock-bg: var(--bg-card);
  --mock-border: var(--border);
  --divider: var(--border);
  --selection-bg: var(--accent);
  --selection-color: var(--text-heading);
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-muted);
  --donut-track: var(--border);
  --grid-color: var(--border);
  --scroll-border: var(--border-emphasis);
  --scroll-dot: var(--text-muted);
  color-scheme: dark;
}

[data-style="minimal-clean"]:not(.dark),
[data-style="minimal-clean"][data-theme="light"] {
  --color-bg: var(--bg-primary);
  --color-bg-surface: var(--bg-secondary);
  --color-heading: var(--text-heading);
  --color-sub: var(--text-heading);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-dim: var(--text-muted);
  --color-faint: var(--border);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-hover-bg: var(--bg-card-hover);
  --glass-hover-border: var(--border-emphasis);
  --ghost-bg: var(--bg-card);
  --ghost-border: var(--border);
  --ghost-hover-bg: var(--bg-card-hover);
  --ghost-hover-border: var(--border-emphasis);
  --ghost-text: var(--text-body);
  --ghost-hover-text: var(--text-heading);
  --mock-bg: var(--bg-card);
  --mock-border: var(--border);
  --divider: var(--border);
  --selection-bg: var(--accent);
  --selection-color: var(--text-heading);
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-muted);
  --donut-track: var(--border);
  --grid-color: var(--border);
  --scroll-border: var(--border-emphasis);
  --scroll-dot: var(--text-muted);
  color-scheme: light;
}

/* ═══════ MAPPING: nature-organic ═══════ */
[data-style="nature-organic"].dark,
[data-style="nature-organic"][data-theme="dark"] {
  --color-bg: var(--bg-primary);
  --color-bg-surface: var(--bg-secondary);
  --color-heading: var(--text-heading);
  --color-sub: var(--text-heading);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-dim: var(--text-muted);
  --color-faint: var(--border);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-hover-bg: var(--bg-card-hover);
  --glass-hover-border: var(--border-emphasis);
  --ghost-bg: var(--bg-card);
  --ghost-border: var(--border);
  --ghost-hover-bg: var(--bg-card-hover);
  --ghost-hover-border: var(--border-emphasis);
  --ghost-text: var(--text-body);
  --ghost-hover-text: var(--text-heading);
  --mock-bg: var(--bg-card);
  --mock-border: var(--border);
  --divider: var(--border);
  --selection-bg: var(--accent);
  --selection-color: var(--text-heading);
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-muted);
  --donut-track: var(--border);
  --grid-color: var(--border);
  --scroll-border: var(--border-emphasis);
  --scroll-dot: var(--text-muted);
  color-scheme: dark;
}

[data-style="nature-organic"]:not(.dark),
[data-style="nature-organic"][data-theme="light"] {
  --color-bg: var(--bg-primary);
  --color-bg-surface: var(--bg-secondary);
  --color-heading: var(--text-heading);
  --color-sub: var(--text-heading);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-dim: var(--text-muted);
  --color-faint: var(--border);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-hover-bg: var(--bg-card-hover);
  --glass-hover-border: var(--border-emphasis);
  --ghost-bg: var(--bg-card);
  --ghost-border: var(--border);
  --ghost-hover-bg: var(--bg-card-hover);
  --ghost-hover-border: var(--border-emphasis);
  --ghost-text: var(--text-body);
  --ghost-hover-text: var(--text-heading);
  --mock-bg: var(--bg-card);
  --mock-border: var(--border);
  --divider: var(--border);
  --selection-bg: var(--accent);
  --selection-color: var(--text-heading);
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-muted);
  --donut-track: var(--border);
  --grid-color: var(--border);
  --scroll-border: var(--border-emphasis);
  --scroll-dot: var(--text-muted);
  color-scheme: light;
}

/* ═══════ MAPPING: startup-saas ═══════ */
[data-style="startup-saas"].dark,
[data-style="startup-saas"][data-theme="dark"] {
  --color-bg: var(--bg-primary);
  --color-bg-surface: var(--bg-secondary);
  --color-heading: var(--text-heading);
  --color-sub: var(--text-heading);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-dim: var(--text-muted);
  --color-faint: var(--border);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-hover-bg: var(--bg-card-hover);
  --glass-hover-border: var(--border-emphasis);
  --ghost-bg: var(--bg-card);
  --ghost-border: var(--border);
  --ghost-hover-bg: var(--bg-card-hover);
  --ghost-hover-border: var(--border-emphasis);
  --ghost-text: var(--text-body);
  --ghost-hover-text: var(--text-heading);
  --mock-bg: var(--bg-card);
  --mock-border: var(--border);
  --divider: var(--border);
  --selection-bg: var(--accent);
  --selection-color: var(--text-heading);
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-muted);
  --donut-track: var(--border);
  --grid-color: var(--border);
  --scroll-border: var(--border-emphasis);
  --scroll-dot: var(--text-muted);
  color-scheme: dark;
}

[data-style="startup-saas"]:not(.dark),
[data-style="startup-saas"][data-theme="light"] {
  --color-bg: var(--bg-primary);
  --color-bg-surface: var(--bg-secondary);
  --color-heading: var(--text-heading);
  --color-sub: var(--text-heading);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-dim: var(--text-muted);
  --color-faint: var(--border);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-hover-bg: var(--bg-card-hover);
  --glass-hover-border: var(--border-emphasis);
  --ghost-bg: var(--bg-card);
  --ghost-border: var(--border);
  --ghost-hover-bg: var(--bg-card-hover);
  --ghost-hover-border: var(--border-emphasis);
  --ghost-text: var(--text-body);
  --ghost-hover-text: var(--text-heading);
  --mock-bg: var(--bg-card);
  --mock-border: var(--border);
  --divider: var(--border);
  --selection-bg: var(--accent);
  --selection-color: var(--text-heading);
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-muted);
  --donut-track: var(--border);
  --grid-color: var(--border);
  --scroll-border: var(--border-emphasis);
  --scroll-dot: var(--text-muted);
  color-scheme: light;
}

/* ═══════ MAPPING: dark-luxury ═══════ */
[data-style="dark-luxury"].dark,
[data-style="dark-luxury"][data-theme="dark"] {
  --color-bg: var(--bg-primary);
  --color-bg-surface: var(--bg-secondary);
  --color-heading: var(--text-heading);
  --color-sub: var(--text-heading);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-dim: var(--text-muted);
  --color-faint: var(--border);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-hover-bg: var(--bg-card-hover);
  --glass-hover-border: var(--border-emphasis);
  --ghost-bg: var(--bg-card);
  --ghost-border: var(--border);
  --ghost-hover-bg: var(--bg-card-hover);
  --ghost-hover-border: var(--border-emphasis);
  --ghost-text: var(--text-body);
  --ghost-hover-text: var(--text-heading);
  --mock-bg: var(--bg-card);
  --mock-border: var(--border);
  --divider: var(--border);
  --selection-bg: var(--accent);
  --selection-color: var(--text-heading);
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-muted);
  --donut-track: var(--border);
  --grid-color: var(--border);
  --scroll-border: var(--border-emphasis);
  --scroll-dot: var(--text-muted);
  color-scheme: dark;
}

[data-style="dark-luxury"]:not(.dark),
[data-style="dark-luxury"][data-theme="light"] {
  --color-bg: var(--bg-primary);
  --color-bg-surface: var(--bg-secondary);
  --color-heading: var(--text-heading);
  --color-sub: var(--text-heading);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-dim: var(--text-muted);
  --color-faint: var(--border);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-hover-bg: var(--bg-card-hover);
  --glass-hover-border: var(--border-emphasis);
  --ghost-bg: var(--bg-card);
  --ghost-border: var(--border);
  --ghost-hover-bg: var(--bg-card-hover);
  --ghost-hover-border: var(--border-emphasis);
  --ghost-text: var(--text-body);
  --ghost-hover-text: var(--text-heading);
  --mock-bg: var(--bg-card);
  --mock-border: var(--border);
  --divider: var(--border);
  --selection-bg: var(--accent);
  --selection-color: var(--text-heading);
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-muted);
  --donut-track: var(--border);
  --grid-color: var(--border);
  --scroll-border: var(--border-emphasis);
  --scroll-dot: var(--text-muted);
  color-scheme: light;
}

/* ═══════ MAPPING: playful-friendly ═══════ */
[data-style="playful-friendly"].dark,
[data-style="playful-friendly"][data-theme="dark"] {
  --color-bg: var(--bg-primary);
  --color-bg-surface: var(--bg-secondary);
  --color-heading: var(--text-heading);
  --color-sub: var(--text-heading);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-dim: var(--text-muted);
  --color-faint: var(--border);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-hover-bg: var(--bg-card-hover);
  --glass-hover-border: var(--border-emphasis);
  --ghost-bg: var(--bg-card);
  --ghost-border: var(--border);
  --ghost-hover-bg: var(--bg-card-hover);
  --ghost-hover-border: var(--border-emphasis);
  --ghost-text: var(--text-body);
  --ghost-hover-text: var(--text-heading);
  --mock-bg: var(--bg-card);
  --mock-border: var(--border);
  --divider: var(--border);
  --selection-bg: var(--accent);
  --selection-color: var(--text-heading);
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-muted);
  --donut-track: var(--border);
  --grid-color: var(--border);
  --scroll-border: var(--border-emphasis);
  --scroll-dot: var(--text-muted);
  color-scheme: dark;
}

[data-style="playful-friendly"]:not(.dark),
[data-style="playful-friendly"][data-theme="light"] {
  --color-bg: var(--bg-primary);
  --color-bg-surface: var(--bg-secondary);
  --color-heading: var(--text-heading);
  --color-sub: var(--text-heading);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-dim: var(--text-muted);
  --color-faint: var(--border);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-hover-bg: var(--bg-card-hover);
  --glass-hover-border: var(--border-emphasis);
  --ghost-bg: var(--bg-card);
  --ghost-border: var(--border);
  --ghost-hover-bg: var(--bg-card-hover);
  --ghost-hover-border: var(--border-emphasis);
  --ghost-text: var(--text-body);
  --ghost-hover-text: var(--text-heading);
  --mock-bg: var(--bg-card);
  --mock-border: var(--border);
  --divider: var(--border);
  --selection-bg: var(--accent);
  --selection-color: var(--text-heading);
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-muted);
  --donut-track: var(--border);
  --grid-color: var(--border);
  --scroll-border: var(--border-emphasis);
  --scroll-dot: var(--text-muted);
  color-scheme: light;
}

/* ═══════ MAPPING: brutalist-raw ═══════ */
[data-style="brutalist-raw"].dark,
[data-style="brutalist-raw"][data-theme="dark"] {
  --color-bg: var(--bg-primary);
  --color-bg-surface: var(--bg-secondary);
  --color-heading: var(--text-heading);
  --color-sub: var(--text-heading);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-dim: var(--text-muted);
  --color-faint: var(--border);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-hover-bg: var(--bg-card-hover);
  --glass-hover-border: var(--border-emphasis);
  --ghost-bg: var(--bg-card);
  --ghost-border: var(--border);
  --ghost-hover-bg: var(--bg-card-hover);
  --ghost-hover-border: var(--border-emphasis);
  --ghost-text: var(--text-body);
  --ghost-hover-text: var(--text-heading);
  --mock-bg: var(--bg-card);
  --mock-border: var(--border);
  --divider: var(--border);
  --selection-bg: var(--accent);
  --selection-color: var(--text-heading);
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-muted);
  --donut-track: var(--border);
  --grid-color: var(--border);
  --scroll-border: var(--border-emphasis);
  --scroll-dot: var(--text-muted);
  color-scheme: dark;
}

[data-style="brutalist-raw"]:not(.dark),
[data-style="brutalist-raw"][data-theme="light"] {
  --color-bg: var(--bg-primary);
  --color-bg-surface: var(--bg-secondary);
  --color-heading: var(--text-heading);
  --color-sub: var(--text-heading);
  --color-body: var(--text-body);
  --color-muted: var(--text-muted);
  --color-dim: var(--text-muted);
  --color-faint: var(--border);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-hover-bg: var(--bg-card-hover);
  --glass-hover-border: var(--border-emphasis);
  --ghost-bg: var(--bg-card);
  --ghost-border: var(--border);
  --ghost-hover-bg: var(--bg-card-hover);
  --ghost-hover-border: var(--border-emphasis);
  --ghost-text: var(--text-body);
  --ghost-hover-text: var(--text-heading);
  --mock-bg: var(--bg-card);
  --mock-border: var(--border);
  --divider: var(--border);
  --selection-bg: var(--accent);
  --selection-color: var(--text-heading);
  --scrollbar-track: var(--bg-primary);
  --scrollbar-thumb: var(--border-emphasis);
  --scrollbar-thumb-hover: var(--text-muted);
  --donut-track: var(--border);
  --grid-color: var(--border);
  --scroll-border: var(--border-emphasis);
  --scroll-dot: var(--text-muted);
  color-scheme: light;
}

/* ═══════ FONT OVERRIDES ═══════ */
[data-style] h1, [data-style] h2, [data-style] h3, [data-style] h4, [data-style] h5, [data-style] h6,
[data-style] .font-heading {
  font-family: var(--font-heading) !important;
}
[data-style] body, [data-style] p, [data-style] span, [data-style] a, [data-style] li, [data-style] td,
[data-style] input, [data-style] textarea, [data-style] button, [data-style] .font-body {
  font-family: var(--font-body) !important;
}

/* Smooth theme transitions */
html[data-style], html[data-style] body, html[data-style] main, html[data-style] section,
html[data-style] header, html[data-style] footer, html[data-style] nav,
html[data-style] div, html[data-style] button, html[data-style] a {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ═══════ THEME TOGGLE BUTTON ═══════ */
.dm-theme-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-heading);
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  padding: 0;
  outline: none;
}

.dm-theme-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 4px 24px rgba(96,165,250,0.22);
  transform: scale(1.08);
}

.dm-theme-btn:active {
  transform: scale(0.95);
}

.dm-theme-btn svg {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

/* Dark theme (default): show sun icon, hide moon */
html.dark .dm-theme-btn .dm-theme-sun,
html[data-theme="dark"] .dm-theme-btn .dm-theme-sun {
  display: block;
  opacity: 1;
}
html.dark .dm-theme-btn .dm-theme-moon,
html[data-theme="dark"] .dm-theme-btn .dm-theme-moon {
  display: none;
  opacity: 0;
}

/* Light theme: show moon icon, hide sun */
html:not(.dark) .dm-theme-btn .dm-theme-sun,
html[data-theme="light"] .dm-theme-btn .dm-theme-sun {
  display: none;
  opacity: 0;
}
html:not(.dark) .dm-theme-btn .dm-theme-moon,
html[data-theme="light"] .dm-theme-btn .dm-theme-moon {
  display: block;
  opacity: 1;
}

/* Light theme: adjust button appearance */
html[data-theme="light"] .dm-theme-btn,
html:not(.dark) .dm-theme-btn {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.1);
  color: var(--text-heading);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
html[data-theme="light"] .dm-theme-btn:hover,
html:not(.dark) .dm-theme-btn:hover {
  background: rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.15);
  box-shadow: 0 4px 24px rgba(96,165,250,0.15);
}

@media (max-width: 768px) {
  .dm-theme-btn {
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
  }
  .dm-theme-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* dh-icon-collection-system */
.dh-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:0;width:1em;height:1em}
.dh-icon svg{stroke-linecap:round;stroke-linejoin:round;overflow:visible;width:100%;height:100%}
.dh-icon--minimal svg{stroke:#94a3b8;stroke-width:1;fill:none}
.dh-icon-styled{transition:all 0.3s ease}