/* ============================================================================= COMPONENT — THEME TOGGLE Icon button switching [data-theme] on between "light" (default) and "dark". Sized/bordered to match the existing hamburger button (css/layout/header.css .site-header__hamburger) so it reads as part of the same header control cluster rather than a bolted-on extra. Depends on: tokens.css. ============================================================================= */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid color-mix(in oklch, var(--color-border), var(--color-accent) 16%); border-radius: 50%; background: linear-gradient(145deg, var(--color-glass-strong), color-mix(in oklch, var(--color-accent-soft), transparent 55%)); box-shadow: 0 1px 0 oklch(100% 0 0 / 0.26) inset; color: var(--color-text-primary); cursor: pointer; flex-shrink: 0; transition: border-color var(--transition-base), color var(--transition-base), transform 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo); } .theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent-strong); transform: translateY(-2px); box-shadow: 0 8px 18px color-mix(in oklch, var(--color-accent), transparent 80%), 0 1px 0 oklch(100% 0 0 / 0.3) inset; } .theme-toggle:focus-visible { outline: 2px solid var(--color-accent-strong); outline-offset: 2px; } .theme-toggle__icon--moon { display: none; } [data-theme="dark"] .theme-toggle__icon--sun { display: none; } [data-theme="dark"] .theme-toggle__icon--moon { display: block; } /* --- Mobile menu variant: full-width row with a text label, matching the mobile nav links' size/weight rather than the compact icon button --- */ .mobile-menu-panel__theme-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); } .mobile-menu-panel__theme-label { font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--color-text-primary); } :root[data-theme="dark"] .theme-toggle { color: var(--color-glow); background: linear-gradient(145deg, oklch(24% 0.045 270 / 0.9), oklch(19% 0.04 225 / 0.86)); border-color: color-mix(in oklch, var(--color-glow), transparent 58%); box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.04) inset, 0 6px 16px oklch(2% 0.018 264 / 0.32); } :root[data-theme="dark"] .theme-toggle:hover, :root[data-theme="dark"] .theme-toggle:focus-visible { color: var(--color-text-primary); border-color: var(--color-glow); box-shadow: 0 0 18px oklch(68% 0.18 215 / 0.2), 0 1px 0 oklch(100% 0 0 / 0.12) inset; } :root[data-theme="dark"] .theme-toggle:focus-visible { outline-color: var(--color-glow); } :root[data-theme="dark"] .theme-toggle__icon { color: var(--color-glow); stroke: currentColor; }