/*
 * Homepage-only theme palette (4 themes) + popover UI.
 * Loaded only by index.html. Other pages unchanged.
 * Body: data-theme="1"|"2"|"3"|"4"
 */

/* ========== THEME 1: Orijinal (koyu indigo) ========== */
body[data-theme="1"] {
    --home-bg: #030014;
    --home-bg-gradient: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(99, 102, 241, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(6, 182, 212, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 40% 30% at 50% 80%, rgba(244, 114, 182, 0.1) 0%, transparent 50%);
    --home-grid: rgba(255, 255, 255, 0.02);
    --home-text: #ffffff;
    --home-text-secondary: rgba(255, 255, 255, 0.7);
    --home-muted: rgba(255, 255, 255, 0.4);
    --home-card: rgba(255, 255, 255, 0.02);
    --home-card-border: rgba(255, 255, 255, 0.08);
    --home-accent: #6366f1;
    --home-accent-light: #818cf8;
    --home-glow: rgba(99, 102, 241, 0.3);
    --home-badge-bg: rgba(99, 102, 241, 0.1);
    --home-badge-border: rgba(99, 102, 241, 0.2);
    --home-orb-1: rgba(99, 102, 241, 0.3);
    --home-orb-2: rgba(6, 182, 212, 0.2);
    --home-orb-3: rgba(244, 114, 182, 0.15);
    --home-line: #6366f1;
    --home-code-bg: rgba(0, 0, 0, 0.3);
    --home-chip-bg: rgba(255, 255, 255, 0.05);
    --home-cta-orb-1: rgba(99, 102, 241, 0.3);
    --home-cta-orb-2: rgba(6, 182, 212, 0.2);
    --home-border: rgba(255, 255, 255, 0.08);
    --home-shadow: rgba(0, 0, 0, 0.3);
    --home-nav-bg: rgba(3, 0, 20, 0.88);
}

/* ========== THEME 2: Açık tonlu ========== */
body[data-theme="2"] {
    --home-bg: #e8e7f3;
    --home-bg-gradient: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(99, 102, 241, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(6, 182, 212, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 40% 30% at 50% 80%, rgba(167, 139, 250, 0.12) 0%, transparent 50%);
    --home-grid: rgba(11, 16, 32, 0.06);
    --home-text: #0B1020;
    --home-text-secondary: rgba(11, 16, 32, 0.75);
    --home-muted: rgba(11, 16, 32, 0.5);
    --home-card: rgba(255, 255, 255, 0.85);
    --home-card-border: rgba(99, 102, 241, 0.2);
    --home-accent: #4f46e5;
    --home-accent-light: #6366f1;
    --home-glow: rgba(99, 102, 241, 0.2);
    --home-badge-bg: rgba(99, 102, 241, 0.12);
    --home-badge-border: rgba(99, 102, 241, 0.25);
    --home-orb-1: rgba(99, 102, 241, 0.25);
    --home-orb-2: rgba(6, 182, 212, 0.18);
    --home-orb-3: rgba(167, 139, 250, 0.15);
    --home-line: #6366f1;
    --home-code-bg: rgba(11, 16, 32, 0.04);
    --home-chip-bg: rgba(99, 102, 241, 0.08);
    --home-cta-orb-1: rgba(99, 102, 241, 0.2);
    --home-cta-orb-2: rgba(6, 182, 212, 0.15);
    --home-border: rgba(11, 16, 32, 0.1);
    --home-shadow: rgba(11, 16, 32, 0.08);
    --home-nav-bg: rgba(255, 255, 255, 0.92);
}

/* ========== THEME 3: Koyu mor (deep purple) ========== */
body[data-theme="3"] {
    --home-bg: #0B0620;
    --home-bg-gradient: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(139, 92, 246, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 30%, rgba(34, 211, 238, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 50% 90%, rgba(26, 11, 61, 0.9) 0%, transparent 60%);
    --home-grid: rgba(246, 247, 255, 0.04);
    --home-text: #F6F7FF;
    --home-text-secondary: rgba(246, 247, 255, 0.75);
    --home-muted: rgba(246, 247, 255, 0.5);
    --home-card: rgba(255, 255, 255, 0.06);
    --home-card-border: rgba(255, 255, 255, 0.14);
    --home-accent: #8B5CF6;
    --home-accent-light: #A78BFA;
    --home-glow: rgba(139, 92, 246, 0.25);
    --home-badge-bg: rgba(139, 92, 246, 0.12);
    --home-badge-border: rgba(139, 92, 246, 0.25);
    --home-orb-1: rgba(139, 92, 246, 0.28);
    --home-orb-2: rgba(34, 211, 238, 0.12);
    --home-orb-3: rgba(167, 139, 250, 0.15);
    --home-line: #8B5CF6;
    --home-code-bg: rgba(5, 2, 20, 0.5);
    --home-chip-bg: rgba(255, 255, 255, 0.06);
    --home-cta-orb-1: rgba(139, 92, 246, 0.25);
    --home-cta-orb-2: rgba(34, 211, 238, 0.12);
    --home-border: rgba(255, 255, 255, 0.14);
    --home-shadow: rgba(0, 0, 0, 0.4);
    --home-nav-bg: rgba(11, 6, 32, 0.9);
}

/* ========== THEME 4: Mint (açık teal) ========== */
body[data-theme="4"] {
    --home-bg: #e8f5f3;
    --home-bg-gradient: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(20, 184, 166, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(6, 182, 212, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 40% 30% at 50% 80%, rgba(167, 243, 208, 0.2) 0%, transparent 50%);
    --home-grid: rgba(15, 23, 42, 0.06);
    --home-text: #0f172a;
    --home-text-secondary: rgba(15, 23, 42, 0.75);
    --home-muted: rgba(15, 23, 42, 0.5);
    --home-card: rgba(255, 255, 255, 0.9);
    --home-card-border: rgba(20, 184, 166, 0.25);
    --home-accent: #0d9488;
    --home-accent-light: #14b8a6;
    --home-glow: rgba(20, 184, 166, 0.2);
    --home-badge-bg: rgba(20, 184, 166, 0.12);
    --home-badge-border: rgba(20, 184, 166, 0.25);
    --home-orb-1: rgba(20, 184, 166, 0.22);
    --home-orb-2: rgba(6, 182, 212, 0.18);
    --home-orb-3: rgba(167, 243, 208, 0.25);
    --home-line: #14b8a6;
    --home-code-bg: rgba(15, 23, 42, 0.04);
    --home-chip-bg: rgba(20, 184, 166, 0.1);
    --home-cta-orb-1: rgba(20, 184, 166, 0.2);
    --home-cta-orb-2: rgba(6, 182, 212, 0.15);
    --home-border: rgba(15, 23, 42, 0.12);
    --home-shadow: rgba(15, 23, 42, 0.1);
    --home-nav-bg: rgba(255, 255, 255, 0.92);
}

/* ---- Açık temalarda (2 ve 4) diğer sayfa yazıları görünür olsun: global renk değişkenleri ---- */
body[data-theme="2"] {
    --color-text-primary: #0B1020;
    --color-text-secondary: rgba(11, 16, 32, 0.75);
    --color-text-muted: rgba(11, 16, 32, 0.5);
    --color-bg-dark: #e8e7f3;
    --color-border: rgba(11, 16, 32, 0.1);
    --color-border-light: rgba(11, 16, 32, 0.06);
}
body[data-theme="4"] {
    --color-text-primary: #0f172a;
    --color-text-secondary: rgba(15, 23, 42, 0.75);
    --color-text-muted: rgba(15, 23, 42, 0.5);
    --color-bg-dark: #e8f5f3;
    --color-border: rgba(15, 23, 42, 0.12);
    --color-border-light: rgba(15, 23, 42, 0.08);
}

/* ---- Body base (all themes) ---- */
body[data-theme="1"],
body[data-theme="2"],
body[data-theme="3"],
body[data-theme="4"] {
    transition: background-color 320ms ease, color 320ms ease;
}

body[data-theme="1"] { background: var(--home-bg); color: var(--home-text); }
body[data-theme="2"] { background: var(--home-bg); color: var(--home-text); }
body[data-theme="3"] {
    background: linear-gradient(180deg, #0B0620 0%, #1A0B3D 45%, #050214 100%);
    color: var(--home-text);
    transition: background 320ms ease, color 320ms ease;
}
body[data-theme="4"] { background: var(--home-bg); color: var(--home-text); }

/* ---- Header (navbar) tema renkleri ---- */
body[data-theme="1"] .navbar,
body[data-theme="2"] .navbar,
body[data-theme="3"] .navbar,
body[data-theme="4"] .navbar {
    background: var(--home-nav-bg);
    border-bottom-color: var(--home-border);
    transition: background 320ms ease, border-color 320ms ease;
}

body[data-theme="1"] .navbar .navbar__logo span,
body[data-theme="2"] .navbar .navbar__logo span,
body[data-theme="3"] .navbar .navbar__logo span,
body[data-theme="4"] .navbar .navbar__logo span {
    color: var(--home-text);
    transition: color 320ms ease;
}

body[data-theme="1"] .navbar .navbar__icon,
body[data-theme="2"] .navbar .navbar__icon,
body[data-theme="3"] .navbar .navbar__icon,
body[data-theme="4"] .navbar .navbar__icon {
    color: var(--home-text);
    transition: color 320ms ease;
}

body[data-theme="1"] .navbar .navbar__link,
body[data-theme="2"] .navbar .navbar__link,
body[data-theme="3"] .navbar .navbar__link,
body[data-theme="4"] .navbar .navbar__link {
    color: var(--home-text-secondary);
    transition: color 320ms ease;
}

body[data-theme="1"] .navbar .navbar__link:hover,
body[data-theme="1"] .navbar .navbar__link.active,
body[data-theme="2"] .navbar .navbar__link:hover,
body[data-theme="2"] .navbar .navbar__link.active,
body[data-theme="3"] .navbar .navbar__link:hover,
body[data-theme="3"] .navbar .navbar__link.active,
body[data-theme="4"] .navbar .navbar__link:hover,
body[data-theme="4"] .navbar .navbar__link.active {
    color: var(--home-text);
}

body[data-theme="1"] .navbar .navbar__link::after,
body[data-theme="2"] .navbar .navbar__link::after,
body[data-theme="3"] .navbar .navbar__link::after,
body[data-theme="4"] .navbar .navbar__link::after {
    background: linear-gradient(135deg, var(--home-accent) 0%, var(--home-accent-light) 100%);
    transition: background 320ms ease;
}

body[data-theme="1"] .navbar .navbar__toggle span,
body[data-theme="2"] .navbar .navbar__toggle span,
body[data-theme="3"] .navbar .navbar__toggle span,
body[data-theme="4"] .navbar .navbar__toggle span {
    background: var(--home-text);
    transition: background 320ms ease;
}

/* Mobil menü açıkken arka plan (light temalarda) */
body[data-theme="2"] .navbar__menu::before,
body[data-theme="4"] .navbar__menu::before {
    background: var(--home-nav-bg);
}

/* ---- Background layers ---- */
.bg-gradient {
    background: var(--home-bg-gradient) !important;
    transition: background 320ms ease;
}

.bg-grid {
    background-image:
        linear-gradient(var(--home-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--home-grid) 1px, transparent 1px) !important;
    transition: background-image 320ms ease;
}

.bg-shapes .shape--1 { background: var(--home-accent) !important; transition: background 320ms ease; }
.bg-shapes .shape--2 { background: var(--home-accent-light) !important; transition: background 320ms ease; }
.bg-shapes .shape--3 { background: var(--home-orb-3) !important; transition: background 320ms ease; }

/* ---- Hero ---- */
.hero__orb--1 { background: var(--home-orb-1) !important; transition: background 320ms ease; }
.hero__orb--2 { background: var(--home-orb-2) !important; transition: background 320ms ease; }
.hero__orb--3 { background: var(--home-orb-3) !important; transition: background 320ms ease; }
.hero__line { background: linear-gradient(180deg, transparent, var(--home-line), transparent) !important; transition: background 320ms ease; }
.hero__badge {
    background: var(--home-badge-bg) !important;
    border-color: var(--home-badge-border) !important;
    color: var(--home-accent-light) !important;
    transition: background 320ms ease, border-color 320ms ease, color 320ms ease;
}
.hero__title-word { color: var(--home-text); transition: color 320ms ease; }
.hero__subtitle { color: var(--home-text-secondary) !important; transition: color 320ms ease; }
.hero__stat-number { color: var(--home-text) !important; transition: color 320ms ease; }
.hero__stat-label { color: var(--home-muted) !important; transition: color 320ms ease; }
.hero__stat-divider { background: var(--home-border) !important; transition: background 320ms ease; }
.hero__code-window { background: var(--home-code-bg) !important; transition: background 320ms ease; }
body[data-theme="2"] .hero .glass-card,
body[data-theme="4"] .hero .glass-card {
    background: var(--home-card) !important;
    border-color: var(--home-card-border) !important;
    transition: background 320ms ease, border-color 320ms ease;
}
.code-window__title { color: var(--home-muted) !important; transition: color 320ms ease; }
.floating-card__label { color: var(--home-muted) !important; transition: color 320ms ease; }
.floating-card__value { color: var(--home-text-secondary) !important; transition: color 320ms ease; }
.scroll-indicator__text { color: var(--home-muted) !important; transition: color 320ms ease; }
.scroll-indicator__line { background: linear-gradient(180deg, var(--home-accent), transparent) !important; transition: background 320ms ease; }

/* Section bg text */
body[data-theme="2"] .section__bg-text { color: rgba(11, 16, 32, 0.05) !important; transition: color 320ms ease; }
body[data-theme="4"] .section__bg-text { color: rgba(15, 23, 42, 0.05) !important; transition: color 320ms ease; }

/* Section header */
.section-header__badge {
    background: var(--home-badge-bg) !important;
    border-color: var(--home-badge-border) !important;
    color: var(--home-accent-light) !important;
    transition: background 320ms ease, border-color 320ms ease, color 320ms ease;
}
.section-header__title { color: var(--home-text) !important; transition: color 320ms ease; }
.section-header__subtitle { color: var(--home-text-secondary) !important; transition: color 320ms ease; }

/* Services */
.service-card {
    background: var(--home-card) !important;
    border-color: var(--home-card-border) !important;
    transition: background 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}
.service-card:hover { border-color: var(--home-card-border) !important; box-shadow: 0 20px 60px var(--home-shadow) !important; }
.service-card__bg { background: linear-gradient(135deg, var(--home-accent) 0%, #06b6d4 100%) !important; transition: background 320ms ease; }
.service-card__glow { background: radial-gradient(circle, var(--home-glow), transparent 70%) !important; transition: background 320ms ease; }
.service-card__icon {
    background: var(--home-badge-bg) !important;
    color: var(--home-accent) !important;
    transition: background 320ms ease, color 320ms ease;
}
.service-card:hover .service-card__icon { color: var(--home-text) !important; }
.service-card__number { color: var(--home-muted) !important; transition: color 320ms ease; }
.service-card__title { color: var(--home-text) !important; transition: color 320ms ease; }
.service-card__description { color: var(--home-text-secondary) !important; transition: color 320ms ease; }
.service-card__features li {
    background: var(--home-chip-bg) !important;
    color: var(--home-muted) !important;
    transition: background 320ms ease, color 320ms ease;
}

/* Process */
.process__line { background: var(--home-border) !important; transition: background 320ms ease; }
.process__marker-inner {
    background: var(--home-bg) !important;
    border-color: var(--home-border) !important;
    transition: background 320ms ease, border-color 320ms ease;
}
body[data-theme="3"] .process__marker-inner { background: #0B0620 !important; }
.process__item.active .process__marker-inner { border-color: var(--home-accent) !important; }
.process__title { color: var(--home-text) !important; transition: color 320ms ease; }
.process__description { color: var(--home-text-secondary) !important; transition: color 320ms ease; }
.process__icon {
    background: var(--home-badge-bg) !important;
    color: var(--home-accent) !important;
    transition: background 320ms ease, color 320ms ease;
}
.process__list li {
    background: var(--home-badge-bg) !important;
    color: var(--home-accent-light) !important;
    transition: background 320ms ease, color 320ms ease;
}

/* Marquee */
.marquee-section {
    border-top-color: var(--home-border) !important;
    border-bottom-color: var(--home-border) !important;
    transition: border-color 320ms ease;
}
.marquee__item { color: var(--home-muted) !important; transition: color 320ms ease; }
.marquee__divider { color: var(--home-accent) !important; transition: color 320ms ease; }

/* CTA */
.cta__orb--1 { background: var(--home-cta-orb-1) !important; transition: background 320ms ease; }
.cta__orb--2 { background: var(--home-cta-orb-2) !important; transition: background 320ms ease; }
.cta__grid {
    background-image:
        linear-gradient(var(--home-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--home-grid) 1px, transparent 1px) !important;
    transition: background-image 320ms ease;
}
.cta__badge {
    background: var(--home-badge-bg) !important;
    border-color: var(--home-badge-border) !important;
    color: var(--home-accent-light) !important;
    transition: background 320ms ease, border-color 320ms ease, color 320ms ease;
}
.cta__title { color: var(--home-text) !important; transition: color 320ms ease; }
.cta__subtitle { color: var(--home-text-secondary) !important; transition: color 320ms ease; }

/* Outline button on light themes */
body[data-theme="2"] .btn--outline,
body[data-theme="4"] .btn--outline {
    color: var(--home-text) !important;
    border-color: var(--home-border) !important;
    transition: color 320ms ease, border-color 320ms ease;
}
body[data-theme="2"] .btn--outline:hover,
body[data-theme="4"] .btn--outline:hover { border-color: var(--home-accent) !important; }

/* ========== THEME PALETTE POPOVER ========== */
.theme-palette-wrapper {
    position: fixed;
    bottom: var(--spacing-xl, 1.5rem);
    left: var(--spacing-xl, 1.5rem);
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    gap: 0;
}

/* Tema butonu: her temada ve mobilde daha görünür */
.theme-toggle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--home-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow:
        0 6px 28px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.2);
    transition: background 320ms ease, color 320ms ease, border-color 320ms ease, transform 200ms ease, box-shadow 320ms ease;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: var(--home-accent);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 0 2px rgba(255, 255, 255, 0.15),
        0 0 24px rgba(99, 102, 241, 0.25);
    transform: scale(1.05);
}

.theme-toggle:focus {
    outline: none;
    box-shadow:
        0 6px 28px rgba(0, 0, 0, 0.45),
        0 0 0 3px var(--home-accent);
}

.theme-toggle svg {
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Açık temalarda (2, 4) buton kontrastı */
body[data-theme="2"] .theme-toggle,
body[data-theme="4"] .theme-toggle {
    border-color: rgba(0, 0, 0, 0.18);
    background: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 6px 28px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.08);
    color: var(--home-text);
}

body[data-theme="2"] .theme-toggle:hover,
body[data-theme="4"] .theme-toggle:hover {
    background: rgba(255, 255, 255, 1);
    border-color: var(--home-accent);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.18),
        0 0 0 2px rgba(99, 102, 241, 0.2),
        0 0 20px rgba(99, 102, 241, 0.15);
}

body[data-theme="2"] .theme-toggle svg,
body[data-theme="4"] .theme-toggle svg {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

/* Popover panel: glass, rounded, above button */
.theme-palette {
    position: absolute;
    left: 0;
    bottom: calc(100% + 12px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--home-border);
    border-radius: 9999px;
    box-shadow: 0 8px 32px var(--home-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.96);
    transition: opacity 250ms ease, transform 250ms ease, visibility 0s linear 250ms;
    pointer-events: none;
}

.theme-palette.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 250ms ease, transform 250ms ease, visibility 0s;
    pointer-events: auto;
}

/* Swatch: small circle, theme color preview */
.theme-palette__swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    -webkit-tap-highlight-color: transparent;
}

.theme-palette__swatch:focus {
    outline: none;
}

.theme-palette__swatch:hover {
    transform: scale(1.1);
}

/* Swatch colors (preview) */
.theme-palette__swatch[data-theme="1"] { background: linear-gradient(135deg, #030014 30%, #6366f1 100%); }
.theme-palette__swatch[data-theme="2"] { background: linear-gradient(135deg, #e8e7f3 0%, #a5b4fc 100%); }
.theme-palette__swatch[data-theme="3"] { background: linear-gradient(135deg, #1A0B3D 30%, #8B5CF6 100%); }
.theme-palette__swatch[data-theme="4"] { background: linear-gradient(135deg, #e8f5f3 0%, #14b8a6 100%); }

/* Selected: ring */
.theme-palette__swatch[aria-pressed="true"] {
    border-color: var(--home-text);
    box-shadow: 0 0 0 2px var(--home-card), 0 0 0 4px var(--home-text);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    body[data-theme="1"],
    body[data-theme="2"],
    body[data-theme="3"],
    body[data-theme="4"],
    .bg-gradient,
    .bg-grid,
    .hero__orb--1, .hero__orb--2, .hero__orb--3,
    .service-card,
    .cta__orb--1, .cta__orb--2,
    .theme-toggle,
    .theme-palette,
    .theme-palette__swatch {
        transition-duration: 0.05ms !important;
    }
    .theme-palette {
        transition: opacity 0.05ms ease, visibility 0s;
    }
}

@media (max-width: 768px) {
    .theme-palette-wrapper {
        bottom: var(--spacing-lg, 1rem);
        left: var(--spacing-lg, 1rem);
    }
    .theme-toggle {
        width: 52px;
        height: 52px;
        border-width: 2px;
        box-shadow:
            0 6px 24px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(255, 255, 255, 0.12),
            0 4px 12px rgba(0, 0, 0, 0.25);
    }
    .theme-toggle svg {
        width: 24px;
        height: 24px;
    }
    body[data-theme="2"] .theme-toggle,
    body[data-theme="4"] .theme-toggle {
        box-shadow:
            0 6px 24px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(0, 0, 0, 0.1),
            0 4px 12px rgba(0, 0, 0, 0.12);
    }
    .theme-palette {
        padding: 10px 12px;
        gap: 8px;
        bottom: calc(100% + 10px);
    }
    .theme-palette__swatch {
        width: 24px;
        height: 24px;
    }
}