/* ARGR - Premium Theme Toggle */

.theme-switch-container {
    display: inline-flex;
    align-items: center;
    position: relative;
}

/* Glassmorphic Switch Capsule */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: rgba(var(--brand-primary-rgb), 0.03);
    border: 1px solid var(--border-color);
    padding: 4px;
    border-radius: var(--radius-full);
    position: relative;
    cursor: pointer;
    transition: all var(--transition-smooth);
    user-select: none;
    height: 38px;
    width: 76px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.theme-toggle-btn:hover {
    border-color: var(--border-color-hover);
    background: rgba(var(--brand-primary-rgb), 0.05);
}

/* Floating indicator pill */
.theme-toggle-pill {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    background-color: var(--brand-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-smooth);
    z-index: 1;
}

/* In light mode, shadow is softer */
[data-theme="light"] .theme-toggle-pill {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Move pill on active state (when theme is light) */
[data-theme="light"] .theme-toggle-pill {
    transform: translateX(38px);
}

/* Toggle Icons */
.theme-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    z-index: 2;
    transition: color var(--transition-smooth);
    color: var(--text-muted);
}

.theme-toggle-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2px;
    transition: transform var(--transition-smooth), opacity var(--transition-smooth);
}

/* Color states based on current active theme */
/* Dark Mode: Sun is muted, Moon is active (over the pill) */
[data-theme="dark"] .theme-toggle-icon.moon {
    color: var(--bg-primary);
}

[data-theme="dark"] .theme-toggle-icon.sun {
    color: var(--text-muted);
}

/* Light Mode: Sun is active (over the pill), Moon is muted */
[data-theme="light"] .theme-toggle-icon.sun {
    color: var(--bg-primary);
}

[data-theme="light"] .theme-toggle-icon.moon {
    color: var(--text-muted);
}

/* Micro-interaction on hover: subtle icon rotation */
.theme-toggle-btn:hover .theme-toggle-icon.sun svg {
    transform: rotate(15deg);
}

.theme-toggle-btn:hover .theme-toggle-icon.moon svg {
    transform: rotate(-10deg) scale(1.05);
}