/* ============================================================================
   COLOR THEME PRESETS
   Mode (light/dark) is controlled by data-theme.
   Palette (saffron/ocean/forest/rose/violet/sunset/mint/midnight/amber/mono)
   is controlled by data-color-theme.
   ============================================================================ */

/* Ocean */
[data-color-theme="ocean"] {
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-light: #eff6ff;
  --secondary: #0891b2;
  --secondary-hover: #0e7490;
  --action-green: #0891b2;
  --action-green-hover: #0e7490;
  --action-green-light: #ecfeff;
  --emerald: #0891b2;
  --emerald-hover: #0e7490;
  --emerald-light: #ecfeff;
  --bg-html: #e8f1fb;
  --bg-body: #f8fbff;
  --bg-grid-line: rgba(30, 64, 175, 0.06);
  --topbar-border: rgba(30, 64, 175, 0.12);
  --nav-controls-bg: rgba(255, 255, 255, 0.9);
  --nav-controls-border: rgba(255, 255, 255, 0.95);
  --nav-link-hover: #eef5ff;
  --surface: #ffffff;
  --surface-card: #ffffff;
  --surface-subtle: #f4f8fd;
  --surface-hover: #eaf2fc;
  --text-dark: #102a43;
  --text-body: #334e68;
  --text-muted: #627d98;
  --border: #d9e2ec;
  --border-strong: #bcccdc;
  --border-focus: #2563eb;
  --shadow-sm: 0 1px 3px rgba(16, 42, 67, 0.08);
  --shadow-md: 0 4px 14px rgba(16, 42, 67, 0.08);
  --shadow-lg: 0 10px 25px rgba(16, 42, 67, 0.12);
}

[data-theme="dark"][data-color-theme="ocean"] {
  --primary: #38bdf8;
  --primary-hover: #7dd3fc;
  --primary-light: rgba(56, 189, 248, 0.18);
  --secondary: #22d3ee;
  --secondary-hover: #67e8f9;
  --action-green: #22d3ee;
  --action-green-hover: #67e8f9;
  --action-green-light: rgba(34, 211, 238, 0.18);
  --emerald: #22d3ee;
  --emerald-hover: #67e8f9;
  --emerald-light: rgba(34, 211, 238, 0.18);
  --bg-html: #07131f;
  --bg-body: #0c1e2d;
  --bg-grid-line: rgba(125, 211, 252, 0.04);
  --topbar-border: rgba(186, 230, 253, 0.1);
  --nav-controls-bg: rgba(12, 30, 45, 0.9);
  --nav-controls-border: rgba(186, 230, 253, 0.12);
  --nav-link-hover: rgba(125, 211, 252, 0.1);
  --surface: #102a43;
  --surface-card: #102a43;
  --surface-subtle: #143b5d;
  --surface-hover: #1b4d70;
  --text-dark: #e3f2fd;
  --text-body: #bfd7ea;
  --text-muted: #8aa9c0;
  --border: rgba(186, 230, 253, 0.13);
  --border-strong: rgba(186, 230, 253, 0.24);
  --border-focus: #38bdf8;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.58);
}

/* Forest */
[data-color-theme="forest"] {
  --primary: #15803d;
  --primary-hover: #166534;
  --primary-light: #f0fdf4;
  --secondary: #0f766e;
  --secondary-hover: #115e59;
  --action-green: #15803d;
  --action-green-hover: #166534;
  --action-green-light: #f0fdf4;
  --emerald: #059669;
  --emerald-hover: #047857;
  --emerald-light: #ecfdf5;
  --bg-html: #e8f4ec;
  --bg-body: #f7fcf8;
  --bg-grid-line: rgba(20, 83, 45, 0.055);
  --topbar-border: rgba(20, 83, 45, 0.12);
  --nav-controls-bg: rgba(255, 255, 255, 0.9);
  --nav-controls-border: rgba(255, 255, 255, 0.95);
  --nav-link-hover: #edf8f0;
  --surface: #ffffff;
  --surface-card: #ffffff;
  --surface-subtle: #f4faf5;
  --surface-hover: #e9f5ec;
  --text-dark: #123524;
  --text-body: #315c43;
  --text-muted: #668572;
  --border: #d6e7da;
  --border-strong: #b7d3bd;
  --border-focus: #15803d;
  --shadow-sm: 0 1px 3px rgba(18, 53, 36, 0.08);
  --shadow-md: 0 4px 14px rgba(18, 53, 36, 0.08);
  --shadow-lg: 0 10px 25px rgba(18, 53, 36, 0.12);
}

[data-theme="dark"][data-color-theme="forest"] {
  --primary: #4ade80;
  --primary-hover: #86efac;
  --primary-light: rgba(74, 222, 128, 0.18);
  --secondary: #2dd4bf;
  --secondary-hover: #5eead4;
  --action-green: #4ade80;
  --action-green-hover: #86efac;
  --action-green-light: rgba(74, 222, 128, 0.18);
  --emerald: #34d399;
  --emerald-hover: #6ee7b7;
  --emerald-light: rgba(52, 211, 153, 0.18);
  --bg-html: #06120b;
  --bg-body: #0b1b12;
  --bg-grid-line: rgba(134, 239, 172, 0.04);
  --topbar-border: rgba(187, 247, 208, 0.1);
  --nav-controls-bg: rgba(11, 27, 18, 0.9);
  --nav-controls-border: rgba(187, 247, 208, 0.12);
  --nav-link-hover: rgba(134, 239, 172, 0.1);
  --surface: #112a1a;
  --surface-card: #112a1a;
  --surface-subtle: #173d25;
  --surface-hover: #205634;
  --text-dark: #e9fbea;
  --text-body: #c5e6cd;
  --text-muted: #8db69a;
  --border: rgba(187, 247, 208, 0.13);
  --border-strong: rgba(187, 247, 208, 0.24);
  --border-focus: #4ade80;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.58);
}

/* Rose */
[data-color-theme="rose"] {
  --primary: #e11d48;
  --primary-hover: #be123c;
  --primary-light: #fff1f2;
  --secondary: #db2777;
  --secondary-hover: #be185d;
  --action-green: #db2777;
  --action-green-hover: #be185d;
  --action-green-light: #fdf2f8;
  --emerald: #e11d48;
  --emerald-hover: #be123c;
  --emerald-light: #fff1f2;
  --bg-html: #f8e9ee;
  --bg-body: #fff8fa;
  --bg-grid-line: rgba(136, 19, 55, 0.055);
  --topbar-border: rgba(136, 19, 55, 0.12);
  --nav-controls-bg: rgba(255, 255, 255, 0.9);
  --nav-controls-border: rgba(255, 255, 255, 0.95);
  --nav-link-hover: #fff0f4;
  --surface: #ffffff;
  --surface-card: #ffffff;
  --surface-subtle: #fff6f8;
  --surface-hover: #ffeef2;
  --text-dark: #4c0519;
  --text-body: #6b2942;
  --text-muted: #9f6478;
  --border: #f0d5dd;
  --border-strong: #e4b8c5;
  --border-focus: #e11d48;
  --shadow-sm: 0 1px 3px rgba(76, 5, 25, 0.08);
  --shadow-md: 0 4px 14px rgba(76, 5, 25, 0.08);
  --shadow-lg: 0 10px 25px rgba(76, 5, 25, 0.12);
}

[data-theme="dark"][data-color-theme="rose"] {
  --primary: #fb7185;
  --primary-hover: #fda4af;
  --primary-light: rgba(251, 113, 133, 0.18);
  --secondary: #f472b6;
  --secondary-hover: #f9a8d4;
  --action-green: #fb7185;
  --action-green-hover: #fda4af;
  --action-green-light: rgba(251, 113, 133, 0.18);
  --emerald: #fb7185;
  --emerald-hover: #fda4af;
  --emerald-light: rgba(251, 113, 133, 0.18);
  --bg-html: #1b080f;
  --bg-body: #260d17;
  --bg-grid-line: rgba(253, 164, 175, 0.04);
  --topbar-border: rgba(255, 228, 230, 0.1);
  --nav-controls-bg: rgba(38, 13, 23, 0.9);
  --nav-controls-border: rgba(255, 228, 230, 0.12);
  --nav-link-hover: rgba(253, 164, 175, 0.1);
  --surface: #3a1220;
  --surface-card: #3a1220;
  --surface-subtle: #4b1729;
  --surface-hover: #612039;
  --text-dark: #fff1f2;
  --text-body: #f5cbd3;
  --text-muted: #d49aa8;
  --border: rgba(255, 228, 230, 0.13);
  --border-strong: rgba(255, 228, 230, 0.24);
  --border-focus: #fb7185;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.58);
}

/* Violet */
[data-color-theme="violet"] {
  --primary: #7c3aed;
  --primary-hover: #6d28d9;
  --primary-light: #f5f3ff;
  --secondary: #9333ea;
  --secondary-hover: #7e22ce;
  --action-green: #7c3aed;
  --action-green-hover: #6d28d9;
  --action-green-light: #f5f3ff;
  --emerald: #8b5cf6;
  --emerald-hover: #7c3aed;
  --emerald-light: #f5f3ff;
  --bg-html: #eeeaff;
  --bg-body: #fbfaff;
  --bg-grid-line: rgba(76, 29, 149, 0.055);
  --topbar-border: rgba(76, 29, 149, 0.12);
  --nav-controls-bg: rgba(255, 255, 255, 0.9);
  --nav-controls-border: rgba(255, 255, 255, 0.95);
  --nav-link-hover: #f4f0ff;
  --surface: #ffffff;
  --surface-card: #ffffff;
  --surface-subtle: #faf8ff;
  --surface-hover: #f2edff;
  --text-dark: #2e1065;
  --text-body: #4c3673;
  --text-muted: #8069a5;
  --border: #e4dcf5;
  --border-strong: #cfc1ec;
  --border-focus: #7c3aed;
  --shadow-sm: 0 1px 3px rgba(46, 16, 101, 0.08);
  --shadow-md: 0 4px 14px rgba(46, 16, 101, 0.08);
  --shadow-lg: 0 10px 25px rgba(46, 16, 101, 0.12);
}

[data-theme="dark"][data-color-theme="violet"] {
  --primary: #a78bfa;
  --primary-hover: #c4b5fd;
  --primary-light: rgba(167, 139, 250, 0.18);
  --secondary: #c084fc;
  --secondary-hover: #d8b4fe;
  --action-green: #a78bfa;
  --action-green-hover: #c4b5fd;
  --action-green-light: rgba(167, 139, 250, 0.18);
  --emerald: #a78bfa;
  --emerald-hover: #c4b5fd;
  --emerald-light: rgba(167, 139, 250, 0.18);
  --bg-html: #0e091b;
  --bg-body: #17102b;
  --bg-grid-line: rgba(221, 214, 254, 0.04);
  --topbar-border: rgba(237, 233, 254, 0.1);
  --nav-controls-bg: rgba(23, 16, 43, 0.9);
  --nav-controls-border: rgba(237, 233, 254, 0.12);
  --nav-link-hover: rgba(196, 181, 253, 0.1);
  --surface: #251942;
  --surface-card: #251942;
  --surface-subtle: #332258;
  --surface-hover: #442d70;
  --text-dark: #f5f3ff;
  --text-body: #ddd6fe;
  --text-muted: #b4a7d6;
  --border: rgba(237, 233, 254, 0.13);
  --border-strong: rgba(237, 233, 254, 0.24);
  --border-focus: #a78bfa;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.58);
}

/* Sunset */
[data-color-theme="sunset"] {
  --primary: #f97316;
  --primary-hover: #ea580c;
  --primary-light: #fff7ed;
  --secondary: #e11d48;
  --secondary-hover: #be123c;
  --action-green: #e11d48;
  --action-green-hover: #be123c;
  --action-green-light: #fff1f2;
  --emerald: #f97316;
  --emerald-hover: #ea580c;
  --emerald-light: #fff7ed;
  --bg-html: #f8eadb;
  --bg-body: #fffaf5;
  --bg-grid-line: rgba(124, 45, 18, 0.055);
  --topbar-border: rgba(124, 45, 18, 0.12);
  --nav-link-hover: #fff1e5;
  --surface: #ffffff;
  --surface-card: #ffffff;
  --surface-subtle: #fff8f0;
  --surface-hover: #ffefe0;
  --text-dark: #431407;
  --text-body: #713f12;
  --text-muted: #a16207;
  --border: #f6d5b8;
  --border-strong: #edb98d;
  --border-focus: #f97316;
  --shadow-sm: 0 1px 3px rgba(124, 45, 18, 0.08);
  --shadow-md: 0 4px 14px rgba(124, 45, 18, 0.08);
  --shadow-lg: 0 10px 25px rgba(124, 45, 18, 0.12);
}

[data-theme="dark"][data-color-theme="sunset"] {
  --primary: #fb923c;
  --primary-hover: #fdba74;
  --primary-light: rgba(251, 146, 60, 0.18);
  --secondary: #fb7185;
  --secondary-hover: #fda4af;
  --action-green: #fb7185;
  --action-green-hover: #fda4af;
  --action-green-light: rgba(251, 113, 133, 0.18);
  --emerald: #fb923c;
  --emerald-hover: #fdba74;
  --emerald-light: rgba(251, 146, 60, 0.18);
  --bg-html: #1c0d05;
  --bg-body: #2a150b;
  --bg-grid-line: rgba(254, 215, 170, 0.04);
  --topbar-border: rgba(255, 237, 213, 0.1);
  --nav-link-hover: rgba(253, 186, 116, 0.1);
  --surface: #3a1e0f;
  --surface-card: #3a1e0f;
  --surface-subtle: #4b2713;
  --surface-hover: #63351a;
  --text-dark: #fff7ed;
  --text-body: #fed7aa;
  --text-muted: #d6a77b;
  --border: rgba(255, 237, 213, 0.13);
  --border-strong: rgba(255, 237, 213, 0.24);
  --border-focus: #fb923c;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.58);
}

/* Mint */
[data-color-theme="mint"] {
  --primary: #0d9488;
  --primary-hover: #0f766e;
  --primary-light: #f0fdfa;
  --secondary: #14b8a6;
  --secondary-hover: #0d9488;
  --action-green: #0d9488;
  --action-green-hover: #0f766e;
  --action-green-light: #f0fdfa;
  --emerald: #10b981;
  --emerald-hover: #059669;
  --emerald-light: #ecfdf5;
  --bg-html: #e2f5f1;
  --bg-body: #f7fffd;
  --bg-grid-line: rgba(19, 78, 74, 0.055);
  --topbar-border: rgba(19, 78, 74, 0.12);
  --nav-link-hover: #e9faf7;
  --surface: #ffffff;
  --surface-card: #ffffff;
  --surface-subtle: #f1fbf9;
  --surface-hover: #e2f7f3;
  --text-dark: #123c38;
  --text-body: #285e58;
  --text-muted: #5f8c85;
  --border: #d2ebe6;
  --border-strong: #afd8d0;
  --border-focus: #0d9488;
  --shadow-sm: 0 1px 3px rgba(18, 60, 56, 0.08);
  --shadow-md: 0 4px 14px rgba(18, 60, 56, 0.08);
  --shadow-lg: 0 10px 25px rgba(18, 60, 56, 0.12);
}

[data-theme="dark"][data-color-theme="mint"] {
  --primary: #2dd4bf;
  --primary-hover: #5eead4;
  --primary-light: rgba(45, 212, 191, 0.18);
  --secondary: #5eead4;
  --secondary-hover: #99f6e4;
  --action-green: #2dd4bf;
  --action-green-hover: #5eead4;
  --action-green-light: rgba(45, 212, 191, 0.18);
  --emerald: #34d399;
  --emerald-hover: #6ee7b7;
  --emerald-light: rgba(52, 211, 153, 0.18);
  --bg-html: #041411;
  --bg-body: #09201c;
  --bg-grid-line: rgba(153, 246, 228, 0.04);
  --topbar-border: rgba(204, 251, 241, 0.1);
  --nav-link-hover: rgba(94, 234, 212, 0.1);
  --surface: #0b2b26;
  --surface-card: #0b2b26;
  --surface-subtle: #104238;
  --surface-hover: #18594c;
  --text-dark: #ecfdf5;
  --text-body: #c2eee5;
  --text-muted: #8cc7bb;
  --border: rgba(204, 251, 241, 0.13);
  --border-strong: rgba(204, 251, 241, 0.24);
  --border-focus: #2dd4bf;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.58);
}

/* Midnight */
[data-color-theme="midnight"] {
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --primary-light: #eef2ff;
  --secondary: #0ea5e9;
  --secondary-hover: #0284c7;
  --action-green: #4f46e5;
  --action-green-hover: #4338ca;
  --action-green-light: #eef2ff;
  --emerald: #0ea5e9;
  --emerald-hover: #0284c7;
  --emerald-light: #f0f9ff;
  --bg-html: #e7ebfb;
  --bg-body: #f8faff;
  --bg-grid-line: rgba(30, 41, 99, 0.06);
  --topbar-border: rgba(30, 41, 99, 0.12);
  --nav-link-hover: #eef1ff;
  --surface: #ffffff;
  --surface-card: #ffffff;
  --surface-subtle: #f4f6ff;
  --surface-hover: #e9edff;
  --text-dark: #172554;
  --text-body: #334155;
  --text-muted: #64748b;
  --border: #dbe2f7;
  --border-strong: #c1ccef;
  --border-focus: #4f46e5;
  --shadow-sm: 0 1px 3px rgba(23, 37, 84, 0.08);
  --shadow-md: 0 4px 14px rgba(23, 37, 84, 0.08);
  --shadow-lg: 0 10px 25px rgba(23, 37, 84, 0.12);
}

[data-theme="dark"][data-color-theme="midnight"] {
  --primary: #60a5fa;
  --primary-hover: #93c5fd;
  --primary-light: rgba(96, 165, 250, 0.18);
  --secondary: #818cf8;
  --secondary-hover: #a5b4fc;
  --action-green: #60a5fa;
  --action-green-hover: #93c5fd;
  --action-green-light: rgba(96, 165, 250, 0.18);
  --emerald: #38bdf8;
  --emerald-hover: #7dd3fc;
  --emerald-light: rgba(56, 189, 248, 0.18);
  --bg-html: #050816;
  --bg-body: #0c1224;
  --bg-grid-line: rgba(191, 219, 254, 0.04);
  --topbar-border: rgba(219, 234, 254, 0.1);
  --nav-link-hover: rgba(147, 197, 253, 0.1);
  --surface: #111a33;
  --surface-card: #111a33;
  --surface-subtle: #182548;
  --surface-hover: #22345f;
  --text-dark: #eff6ff;
  --text-body: #c7d7f2;
  --text-muted: #91a8ca;
  --border: rgba(219, 234, 254, 0.13);
  --border-strong: rgba(219, 234, 254, 0.24);
  --border-focus: #60a5fa;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.58);
}

/* Amber */
[data-color-theme="amber"] {
  --primary: #d97706;
  --primary-hover: #b45309;
  --primary-light: #fffbeb;
  --secondary: #ca8a04;
  --secondary-hover: #a16207;
  --action-green: #d97706;
  --action-green-hover: #b45309;
  --action-green-light: #fffbeb;
  --emerald: #ca8a04;
  --emerald-hover: #a16207;
  --emerald-light: #fefce8;
  --bg-html: #f7efd9;
  --bg-body: #fffdf7;
  --bg-grid-line: rgba(120, 53, 15, 0.055);
  --topbar-border: rgba(120, 53, 15, 0.12);
  --nav-link-hover: #fff8df;
  --surface: #ffffff;
  --surface-card: #ffffff;
  --surface-subtle: #fffcf1;
  --surface-hover: #fff5d2;
  --text-dark: #451a03;
  --text-body: #713f12;
  --text-muted: #a16207;
  --border: #f0dfb5;
  --border-strong: #dfc37d;
  --border-focus: #d97706;
  --shadow-sm: 0 1px 3px rgba(69, 26, 3, 0.08);
  --shadow-md: 0 4px 14px rgba(69, 26, 3, 0.08);
  --shadow-lg: 0 10px 25px rgba(69, 26, 3, 0.12);
}

[data-theme="dark"][data-color-theme="amber"] {
  --primary: #fbbf24;
  --primary-hover: #fcd34d;
  --primary-light: rgba(251, 191, 36, 0.18);
  --secondary: #facc15;
  --secondary-hover: #fde047;
  --action-green: #fbbf24;
  --action-green-hover: #fcd34d;
  --action-green-light: rgba(251, 191, 36, 0.18);
  --emerald: #facc15;
  --emerald-hover: #fde047;
  --emerald-light: rgba(250, 204, 21, 0.18);
  --bg-html: #161003;
  --bg-body: #241a05;
  --bg-grid-line: rgba(254, 240, 138, 0.04);
  --topbar-border: rgba(254, 243, 199, 0.1);
  --nav-link-hover: rgba(253, 224, 71, 0.1);
  --surface: #332308;
  --surface-card: #332308;
  --surface-subtle: #47310b;
  --surface-hover: #604510;
  --text-dark: #fffbeb;
  --text-body: #f7e7b0;
  --text-muted: #cbb574;
  --border: rgba(254, 243, 199, 0.13);
  --border-strong: rgba(254, 243, 199, 0.24);
  --border-focus: #fbbf24;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.58);
}

/* Monochrome */
[data-color-theme="mono"] {
  --primary: #374151;
  --primary-hover: #1f2937;
  --primary-light: #f3f4f6;
  --secondary: #4b5563;
  --secondary-hover: #374151;
  --action-green: #374151;
  --action-green-hover: #1f2937;
  --action-green-light: #f3f4f6;
  --emerald: #4b5563;
  --emerald-hover: #374151;
  --emerald-light: #f3f4f6;
  --bg-html: #e5e7eb;
  --bg-body: #f9fafb;
  --bg-grid-line: rgba(17, 24, 39, 0.055);
  --topbar-border: rgba(17, 24, 39, 0.12);
  --nav-link-hover: #f3f4f6;
  --surface: #ffffff;
  --surface-card: #ffffff;
  --surface-subtle: #f3f4f6;
  --surface-hover: #e5e7eb;
  --text-dark: #111827;
  --text-body: #374151;
  --text-muted: #6b7280;
  --border: #d1d5db;
  --border-strong: #9ca3af;
  --border-focus: #374151;
  --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.08);
  --shadow-md: 0 4px 14px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 10px 25px rgba(17, 24, 39, 0.12);
}

[data-theme="dark"][data-color-theme="mono"] {
  --primary: #e5e7eb;
  --primary-hover: #ffffff;
  --primary-light: rgba(229, 231, 235, 0.14);
  --secondary: #d1d5db;
  --secondary-hover: #f3f4f6;
  --action-green: #e5e7eb;
  --action-green-hover: #ffffff;
  --action-green-light: rgba(229, 231, 235, 0.14);
  --emerald: #d1d5db;
  --emerald-hover: #f3f4f6;
  --emerald-light: rgba(209, 213, 219, 0.14);
  --bg-html: #08090b;
  --bg-body: #111315;
  --bg-grid-line: rgba(255, 255, 255, 0.035);
  --topbar-border: rgba(255, 255, 255, 0.08);
  --nav-link-hover: rgba(255, 255, 255, 0.08);
  --surface: #1b1d20;
  --surface-card: #1b1d20;
  --surface-subtle: #24272b;
  --surface-hover: #30343a;
  --text-dark: #f9fafb;
  --text-body: #e5e7eb;
  --text-muted: #9ca3af;
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);
  --border-focus: #e5e7eb;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.48);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.62);
}

/* Palette picker */
.theme-palette {
  position: relative;
  flex-shrink: 0;
}

.theme-palette-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 4px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-subtle);
  color: var(--text-dark);
  cursor: pointer;
  outline: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
}

.theme-palette-btn:hover,
.theme-palette-btn:focus-visible {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--primary);
  transform: scale(1.06);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.theme-palette-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--primary-light);
}

.theme-palette-btn:active {
  transform: scale(0.92);
}

.theme-palette-icon {
  width: 20px;
  height: 20px;
}

.theme-palette-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 160;
  width: 176px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
}

.theme-palette-menu[hidden] {
  display: none;
}

.theme-palette-title {
  padding: 4px 9px 7px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.theme-option {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 9px;
  padding: 8px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  font-size: 14px;
  text-align: left;
}

.theme-option:hover,
.theme-option:focus-visible,
.theme-option[aria-checked="true"] {
  background: var(--primary-light);
  color: var(--primary);
  outline: none;
}

.theme-option[aria-checked="true"]::after {
  content: "✓";
  margin-left: auto;
  font-weight: 700;
}

.theme-swatch {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 50%;
}

.swatch-saffron { background: linear-gradient(135deg, #ea580c 50%, #15803d 50%); }
.swatch-ocean { background: linear-gradient(135deg, #2563eb 50%, #0891b2 50%); }
.swatch-forest { background: linear-gradient(135deg, #15803d 50%, #0f766e 50%); }
.swatch-rose { background: linear-gradient(135deg, #e11d48 50%, #db2777 50%); }
.swatch-violet { background: linear-gradient(135deg, #7c3aed 50%, #9333ea 50%); }
.swatch-sunset { background: linear-gradient(135deg, #f97316 50%, #e11d48 50%); }
.swatch-mint { background: linear-gradient(135deg, #0d9488 50%, #10b981 50%); }
.swatch-midnight { background: linear-gradient(135deg, #4f46e5 50%, #0ea5e9 50%); }
.swatch-amber { background: linear-gradient(135deg, #d97706 50%, #ca8a04 50%); }
.swatch-mono { background: linear-gradient(135deg, #374151 50%, #9ca3af 50%); }

@media (max-width: 480px) {
  .theme-palette-btn {
    width: 34px;
    height: 34px;
    margin: 0 2px;
  }

  .theme-palette-menu {
    right: -4px;
  }
}