/* ABOUTME: Full coordinated color themes for brand switching.
   ABOUTME: Include this file in HTML pages that need palette support. */

/* Default palette (Indigo) */
:root {
    --accent: #6366f1;
    --accent-hover: #818cf8;
    --accent-light: #e0e7ff;
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-tertiary: #1a1a24;
    --text-primary: #e5e5eb;
    --text-secondary: #a1a1b5;
    --text-muted: #71718a;
    --border: #262635;
    --code-bg: #0d0d12;
}

/* Indigo - cool blue-purple tones */
[data-palette="indigo"] {
    --accent: #6366f1;
    --accent-hover: #818cf8;
    --accent-light: #e0e7ff;
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-tertiary: #1a1a24;
    --text-primary: #e5e5eb;
    --text-secondary: #a1a1b5;
    --text-muted: #71718a;
    --border: #262635;
    --code-bg: #0d0d12;
}

/* Emerald - fresh green tones */
[data-palette="emerald"] {
    --accent: #10b981;
    --accent-hover: #34d399;
    --accent-light: #d1fae5;
    --bg-primary: #0a0f0d;
    --bg-secondary: #121a17;
    --bg-tertiary: #1a2420;
    --text-primary: #e5ebe8;
    --text-secondary: #a1b5ac;
    --text-muted: #718a80;
    --border: #263530;
    --code-bg: #0d120f;
}

/* Rose - warm pink-red tones */
[data-palette="rose"] {
    --accent: #f43f5e;
    --accent-hover: #fb7185;
    --accent-light: #ffe4e6;
    --bg-primary: #0f0a0b;
    --bg-secondary: #1a1214;
    --bg-tertiary: #241a1c;
    --text-primary: #ebe5e6;
    --text-secondary: #b5a1a5;
    --text-muted: #8a7175;
    --border: #352628;
    --code-bg: #120d0e;
}

/* Amber - warm golden tones */
[data-palette="amber"] {
    --accent: #f59e0b;
    --accent-hover: #fbbf24;
    --accent-light: #fef3c7;
    --bg-primary: #0f0e0a;
    --bg-secondary: #1a1812;
    --bg-tertiary: #24211a;
    --text-primary: #ebe9e5;
    --text-secondary: #b5afa1;
    --text-muted: #8a8271;
    --border: #353026;
    --code-bg: #12110d;
}

/* Violet - rich purple tones */
[data-palette="violet"] {
    --accent: #8b5cf6;
    --accent-hover: #a78bfa;
    --accent-light: #ede9fe;
    --bg-primary: #0d0a0f;
    --bg-secondary: #16121a;
    --bg-tertiary: #1e1a24;
    --text-primary: #e8e5eb;
    --text-secondary: #ada1b5;
    --text-muted: #80718a;
    --border: #302635;
    --code-bg: #100d12;
}

/* Cyan - cool teal tones */
[data-palette="cyan"] {
    --accent: #06b6d4;
    --accent-hover: #22d3ee;
    --accent-light: #cffafe;
    --bg-primary: #0a0e0f;
    --bg-secondary: #12181a;
    --bg-tertiary: #1a2224;
    --text-primary: #e5eaeb;
    --text-secondary: #a1b0b5;
    --text-muted: #71848a;
    --border: #263235;
    --code-bg: #0d1112;
}

/* Emerald Dark - neutral gray with emerald accents */
[data-palette="emerald-dark"] {
    --accent: #10b981;
    --accent-hover: #34d399;
    --accent-light: #d1fae5;
    --bg-primary: #09090b;
    --bg-secondary: #18181b;
    --bg-tertiary: #27272a;
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --border: #3f3f46;
    --code-bg: #0f0f10;
}

/* Emerald Light - fresh green light mode */
[data-palette="emerald-light"] {
    --accent: #059669;
    --accent-hover: #047857;
    --accent-light: #d1fae5;
    --bg-primary: #ffffff;
    --bg-secondary: #f0fdf4;
    --bg-tertiary: #dcfce7;
    --text-primary: #022c22;
    --text-secondary: #064e3b;
    --text-muted: #065f46;
    --border: #a7f3d0;
    --code-bg: #ecfdf5;
}

/* Palette menu styles */
.palette-menu.open,
.palette-switcher-menu.open {
    display: block !important;
}

.palette-option.active {
    color: var(--accent);
}