/* Palettes override the vault tokens. Loaded after app.css. */
html[data-theme="ink"] {
    --vc-bg: #0b0e14;
    --vc-bg-soft: #11161f;
    --vc-surface: #171d28;
    --vc-surface-hover: #1e2633;
    --vc-surface-raised: #252e3d;
    --vc-text: #eef2f7;
    --vc-text-secondary: #a9b4c4;
    --vc-text-muted: #6d7b8f;
    --vc-accent-rgb: 96 165 250;
    --vc-accent-hover: #bfdbfe;
    --vc-accent-soft: #dbeafe;
    --vc-accent-ink: #0b1220;
    --vc-accent-deep: #1d4ed8;
    --vc-accent-deeper: #1e3a8a;
}

html[data-theme="moss"] {
    --vc-bg: #07110d;
    --vc-bg-soft: #0d1813;
    --vc-surface: #12201a;
    --vc-surface-hover: #1a2b23;
    --vc-surface-raised: #21362c;
    --vc-text: #eef6f1;
    --vc-text-secondary: #a8c3b4;
    --vc-text-muted: #6d8b7a;
    --vc-accent-rgb: 52 211 153;
    --vc-accent-hover: #6ee7b7;
    --vc-accent-soft: #d1fae5;
    --vc-accent-ink: #052e22;
    --vc-accent-deep: #047857;
    --vc-accent-deeper: #064e3b;
}

html[data-theme="tide"] {
    --vc-bg: #071114;
    --vc-bg-soft: #0d181c;
    --vc-surface: #122126;
    --vc-surface-hover: #1a2c33;
    --vc-surface-raised: #213842;
    --vc-text: #eef7f8;
    --vc-text-secondary: #a7c4c8;
    --vc-text-muted: #6c8b90;
    --vc-accent-rgb: 34 211 238;
    --vc-accent-hover: #67e8f9;
    --vc-accent-soft: #cffafe;
    --vc-accent-ink: #042f2e;
    --vc-accent-deep: #0e7490;
    --vc-accent-deeper: #164e63;
}

html[data-theme="dusk"] {
    --vc-bg: #0c0a12;
    --vc-bg-soft: #14111c;
    --vc-surface: #1c1726;
    --vc-surface-hover: #261f33;
    --vc-surface-raised: #312844;
    --vc-text: #f4f0fa;
    --vc-text-secondary: #c4b8d4;
    --vc-text-muted: #857898;
    --vc-accent-rgb: 167 139 250;
    --vc-accent-hover: #c4b5fd;
    --vc-accent-soft: #ede9fe;
    --vc-accent-ink: #1e1033;
    --vc-accent-deep: #6d28d9;
    --vc-accent-deeper: #4c1d95;
}

html[data-theme="rgb"] {
    --vc-bg: #0b0c10;
    --vc-bg-soft: #101218;
    --vc-surface: #161822;
    --vc-surface-hover: #1e2230;
    --vc-surface-raised: #272b3c;
    --vc-text: #f4f5f8;
    --vc-text-secondary: #b7bdcc;
    --vc-text-muted: #7d8496;
    --vc-accent-rgb: 255 77 140;
    --vc-accent-hover: color-mix(in srgb, var(--vc-accent) 68%, white);
    --vc-accent-soft: color-mix(in srgb, var(--vc-accent) 42%, white);
    --vc-accent-ink: #0c0d12;
    --vc-accent-deep: color-mix(in srgb, var(--vc-accent) 52%, black);
    --vc-accent-deeper: color-mix(in srgb, var(--vc-accent) 32%, black);
}

html[data-theme="ember"] {
    --vc-bg: #120c0d;
    --vc-bg-soft: #1a1213;
    --vc-surface: #24181a;
    --vc-surface-hover: #2e2022;
    --vc-surface-raised: #3a282b;
    --vc-text: #fbf1f2;
    --vc-text-secondary: #d4b8bc;
    --vc-text-muted: #94777c;
    --vc-accent-rgb: 251 113 133;
    --vc-accent-hover: #fda4af;
    --vc-accent-soft: #ffe4e6;
    --vc-accent-ink: #2a1014;
    --vc-accent-deep: #be123c;
    --vc-accent-deeper: #881337;
}

html[data-theme="ash"] {
    --vc-bg: #0e0f11;
    --vc-bg-soft: #15171a;
    --vc-surface: #1c1f24;
    --vc-surface-hover: #252930;
    --vc-surface-raised: #2e333b;
    --vc-text: #f3f4f6;
    --vc-text-secondary: #b6bcc6;
    --vc-text-muted: #7c8491;
    --vc-accent-rgb: 203 213 225;
    --vc-accent-hover: #e2e8f0;
    --vc-accent-soft: #f1f5f9;
    --vc-accent-ink: #111317;
    --vc-accent-deep: #64748b;
    --vc-accent-deeper: #334155;
}

html[data-theme="copper"] {
    --vc-bg: #120e0b;
    --vc-bg-soft: #1b1510;
    --vc-surface: #261c15;
    --vc-surface-hover: #31241b;
    --vc-surface-raised: #3d2d22;
    --vc-text: #fbf4ee;
    --vc-text-secondary: #d4c0b0;
    --vc-text-muted: #947e6c;
    --vc-accent-rgb: 251 146 60;
    --vc-accent-hover: #fdba74;
    --vc-accent-soft: #ffedd5;
    --vc-accent-ink: #2a1608;
    --vc-accent-deep: #c2410c;
    --vc-accent-deeper: #7c2d12;
}

html[data-theme="honey"] {
    --vc-bg: #12100a;
    --vc-bg-soft: #1b180f;
    --vc-surface: #262214;
    --vc-surface-hover: #322c1a;
    --vc-surface-raised: #3e3620;
    --vc-text: #fbf8ef;
    --vc-text-secondary: #d4ccb4;
    --vc-text-muted: #948a70;
    --vc-accent-rgb: 250 204 21;
    --vc-accent-hover: #fde047;
    --vc-accent-soft: #fef9c3;
    --vc-accent-ink: #1c1604;
    --vc-accent-deep: #a16207;
    --vc-accent-deeper: #713f12;
}

html[data-theme="lagoon"] {
    --vc-bg: #071211;
    --vc-bg-soft: #0d1a18;
    --vc-surface: #122421;
    --vc-surface-hover: #1a302c;
    --vc-surface-raised: #213c38;
    --vc-text: #eef7f5;
    --vc-text-secondary: #a8c6c0;
    --vc-text-muted: #6d8e87;
    --vc-accent-rgb: 45 212 191;
    --vc-accent-hover: #5eead4;
    --vc-accent-soft: #ccfbf1;
    --vc-accent-ink: #042f2e;
    --vc-accent-deep: #0f766e;
    --vc-accent-deeper: #134e4a;
}

html[data-theme="iris"] {
    --vc-bg: #0b0c14;
    --vc-bg-soft: #12141e;
    --vc-surface: #191c2a;
    --vc-surface-hover: #222636;
    --vc-surface-raised: #2c3146;
    --vc-text: #f1f2f8;
    --vc-text-secondary: #b7bbd0;
    --vc-text-muted: #7d84a0;
    --vc-accent-rgb: 129 140 248;
    --vc-accent-hover: #a5b4fc;
    --vc-accent-soft: #e0e7ff;
    --vc-accent-ink: #0f1224;
    --vc-accent-deep: #4338ca;
    --vc-accent-deeper: #312e81;
}

html[data-theme="wine"] {
    --vc-bg: #12080c;
    --vc-bg-soft: #1c0e13;
    --vc-surface: #28141b;
    --vc-surface-hover: #341b24;
    --vc-surface-raised: #42232e;
    --vc-text: #fbf1f4;
    --vc-text-secondary: #d4b4be;
    --vc-text-muted: #94707c;
    --vc-accent-rgb: 244 63 94;
    --vc-accent-hover: #fb7185;
    --vc-accent-soft: #ffe4e6;
    --vc-accent-ink: #2a0a12;
    --vc-accent-deep: #be123c;
    --vc-accent-deeper: #881337;
}

.theme-menu-items {
    margin: 0.1rem 0.35rem 0.35rem;
    padding: 0.15rem 0.15rem 0.2rem;
    border-left: none;
}

.theme-palette {
    display: grid;
    grid-template-columns: repeat(6, 1.15rem);
    gap: 0.45rem;
    margin: 0;
    padding: 0.15rem;
}

.theme-swatch {
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.theme-swatch:hover,
.theme-swatch:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 0 2px var(--vc-text);
}

.theme-swatch.is-selected,
.theme-swatch.is-selected:hover,
.theme-swatch.is-selected:focus-visible {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 0 2px var(--vc-surface-raised), 0 0 0 4px var(--vc-text);
}

.theme-swatch.is-rgb {
    background: conic-gradient(#ff4d6a, #ffd84d, #5dff8a, #4de4ff, #6d7bff, #e14dff, #ff4d6a);
    animation: theme-rgb-chip 6s linear infinite;
}

@keyframes theme-rgb-chip {
    to { transform: rotate(360deg); }
}