/**
 * Theme Switcher - Color theme overrides + Switcher UI
 * Loads after theme styles to override variables and hardcoded colors.
 *
 * @package Theme_Switcher
 */

/* -------------------------------------------------------------------------
 * Green Theme - Dark mode (teal #7BC3BD, dark teal-tinted backgrounds)
 * ------------------------------------------------------------------------- */
[data-color-theme="green"] {
    --color-violet: #7BC3BD;
    --color-primary: var(--color-violet);
    --color-accent: var(--color-violet);
    --color-accent-lilac: rgba(123, 195, 189, 0.5);
    --color-mystic-dark: #0A1F1D;
    --color-bg: #0A1F1D;
    --color-card-bg: #0F2D2B;
    --color-border: #24615D;
    --color-mystic-velvet: #24615D;
    --color-lavender: #9ED9D5;
    --color-text-light: #7AB8B3;
}

[data-color-theme="green"][data-theme="light"] {
    --color-violet: #0D9488;
    --color-primary: var(--color-violet);
    --color-accent: var(--color-violet);
    --color-accent-lilac: rgba(13, 148, 136, 0.5);
    --color-mystic-dark: #F0FDFB;
    --color-bg: #F0FDFB;
    --color-card-bg: #CCF5F2;
    --color-border: #99E6E0;
    --color-mystic-velvet: #CCF5F2;
    --color-lavender: #0F766E;
    --color-text: #115E59;
    --color-text-light: #0F766E;
    --color-white: #115E59;
}

/* -------------------------------------------------------------------------
 * Gold Theme - Dark mode (dark amber-tinted backgrounds)
 * ------------------------------------------------------------------------- */
[data-color-theme="gold"] {
    --color-violet: #FBBF24;
    --color-primary: var(--color-violet);
    --color-accent: var(--color-violet);
    --color-accent-lilac: rgba(251, 191, 36, 0.5);
    --color-mystic-dark: #1A1208;
    --color-bg: #1A1208;
    --color-card-bg: #2C1F0E;
    --color-border: #78350F;
    --color-mystic-velvet: #78350F;
    --color-lavender: #FCD34D;
    --color-text-light: #B8A07A;
}

[data-color-theme="gold"][data-theme="light"] {
    --color-violet: #D97706;
    --color-primary: var(--color-violet);
    --color-accent: var(--color-violet);
    --color-accent-lilac: rgba(217, 119, 6, 0.5);
    --color-mystic-dark: #FFFBEB;
    --color-bg: #FFFBEB;
    --color-card-bg: #FEF3C7;
    --color-border: #FDE68A;
    --color-mystic-velvet: #FEF3C7;
    --color-lavender: #B45309;
    --color-text: #78350F;
    --color-text-light: #92400E;
    --color-white: #78350F;
}

/* -------------------------------------------------------------------------
 * Hardcoded color overrides - Green theme (#7BC3BD)
 * ------------------------------------------------------------------------- */
[data-color-theme="green"] .hero__shine--1 {
    background: radial-gradient(circle, rgba(123, 195, 189, 0.4) 0%, transparent 70%);
}

[data-color-theme="green"] .hero__shine--2 {
    background: radial-gradient(circle, rgba(123, 195, 189, 0.2) 0%, transparent 70%);
}

[data-color-theme="green"] .hero__shine--3 {
    background: radial-gradient(circle, rgba(123, 195, 189, 0.3) 0%, transparent 65%);
}

[data-color-theme="green"] .hero__shimmer {
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6), 0 0 14px rgba(123, 195, 189, 0.35);
}

[data-color-theme="green"] .hero__shimmer:nth-child(5n) {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.7), 0 0 22px rgba(158, 217, 213, 0.3);
}

[data-color-theme="green"] .hero__dust:nth-child(4n) {
    background: rgba(158, 217, 213, 0.6);
}

[data-color-theme="green"] .service-card:hover {
    box-shadow: 0 10px 30px rgba(123, 195, 189, 0.1);
}

[data-color-theme="green"][data-theme="light"] .hero__bg-effects .hero__shine-orb--violet {
    background: radial-gradient(circle, rgba(13, 148, 136, 0.2) 0%, transparent 70%);
}

[data-color-theme="green"][data-theme="light"] .hero__bg-effects .hero__shine-orb--lavender {
    background: radial-gradient(circle, rgba(158, 217, 213, 0.25) 0%, transparent 70%);
}

[data-color-theme="green"][data-theme="light"] .cta-banner__star {
    color: rgba(13, 148, 136, 0.85);
}

/* -------------------------------------------------------------------------
 * Hardcoded color overrides - Gold theme
 * ------------------------------------------------------------------------- */
[data-color-theme="gold"] .hero__shine--1 {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.4) 0%, transparent 70%);
}

[data-color-theme="gold"] .hero__shine--2 {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, transparent 70%);
}

[data-color-theme="gold"] .hero__shine--3 {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, transparent 65%);
}

[data-color-theme="gold"] .hero__shimmer {
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6), 0 0 14px rgba(251, 191, 36, 0.35);
}

[data-color-theme="gold"] .hero__shimmer:nth-child(5n) {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.7), 0 0 22px rgba(252, 211, 77, 0.3);
}

[data-color-theme="gold"] .hero__dust:nth-child(4n) {
    background: rgba(252, 211, 77, 0.6);
}

[data-color-theme="gold"] .service-card:hover {
    box-shadow: 0 10px 30px rgba(251, 191, 36, 0.1);
}

[data-color-theme="gold"][data-theme="light"] .hero__bg-effects .hero__shine-orb--violet {
    background: radial-gradient(circle, rgba(217, 119, 6, 0.2) 0%, transparent 70%);
}

[data-color-theme="gold"][data-theme="light"] .hero__bg-effects .hero__shine-orb--lavender {
    background: radial-gradient(circle, rgba(252, 211, 77, 0.25) 0%, transparent 70%);
}

[data-color-theme="gold"][data-theme="light"] .cta-banner__star {
    color: rgba(217, 119, 6, 0.85);
}

/* -------------------------------------------------------------------------
 * Switcher UI - Fixed to viewport edge
 * ------------------------------------------------------------------------- */
.theme-switcher {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 0.875rem;
}

.theme-switcher__tab {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 80px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: 12px 0 0 12px;
    background: var(--color-card-bg);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.theme-switcher__tab:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

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

.theme-switcher__panel {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    padding: 1rem;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: 12px 0 0 12px;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
}

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

.theme-switcher__panel:not([hidden]) {
    display: block;
}

.theme-switcher__section {
    margin-bottom: 1rem;
}

.theme-switcher__section:last-child {
    margin-bottom: 0;
}

.theme-switcher__label {
    display: block;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.theme-switcher__options {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.theme-switcher__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    font-size: 0.875rem;
    text-align: left;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.theme-switcher__option:hover {
    border-color: var(--color-primary);
}

.theme-switcher__option[aria-pressed="true"] {
    border-color: var(--color-primary);
    background: rgba(159, 122, 234, 0.08);
}

[data-color-theme="green"] .theme-switcher__option[aria-pressed="true"] {
    background: rgba(123, 195, 189, 0.08);
}

[data-color-theme="gold"] .theme-switcher__option[aria-pressed="true"] {
    background: rgba(251, 191, 36, 0.08);
}

.theme-switcher__swatch {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
}

.theme-switcher__option-label {
    flex: 1;
}

.theme-switcher__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.theme-switcher__toggle:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.theme-switcher__icon {
    width: 20px;
    height: 20px;
}

.theme-switcher__icon--sun {
    display: none;
}

.theme-switcher__icon--moon {
    display: block;
}

[data-theme="light"] .theme-switcher__icon--sun {
    display: block;
}

[data-theme="light"] .theme-switcher__icon--moon {
    display: none;
}

.theme-switcher__toggle .theme-switcher__icon svg {
    width: 100%;
    height: 100%;
}