/* ============================================================
   FOCAL — Light theme + theme toggle
   ------------------------------------------------------------
   Dark is the default (each page defines it in its own :root).
   This shared file adds:
     1. the light-mode palette override  (:root[data-theme="light"])
     2. rule-level fixes for hardcoded colours that vars can't reach
     3. the 3-way theme-toggle component (works in both themes)
   Loaded on every page; if it fails to load, pages stay dark.
   ============================================================ */

/* ─────────────────────────────────────────────
   1. LIGHT PALETTE
   ───────────────────────────────────────────── */
:root[data-theme="light"] {
    --bg: #FFFFFF;
    --bg-raised: #F7F7F8;
    --bg-card: #FFFFFF;
    --bg-card-hover: #F4F4F5;
    --border: #E4E4E7;
    --border-subtle: #EFEFF1;
    --text: #18181B;
    --text-secondary: #52525B;
    --text-muted: #71717A;
    /* amber deepens for legibility on white (text / icons / numbers) */
    --accent: #B45309;
    --accent-hover: #92400E;
    --accent-subtle: rgba(245, 158, 11, 0.12);
    --accent-glow: rgba(245, 158, 11, 0.10);
    --red-muted: #FEE2E2;
    --red-text: #B91C1C;
    --green-muted: #DCFCE7;
    --green-text: #15803D;
}

/* ─────────────────────────────────────────────
   2. LIGHT RULE-LEVEL FIXES (hardcoded colours)
   ───────────────────────────────────────────── */

/* Primary buttons keep the BRIGHT brand fill (8.9:1 with dark text on
   any background). --accent is deep in light, so re-assert bright here.
   :not(.btn-ghost) leaves ghost buttons alone. */
:root[data-theme="light"] .btn:not(.btn-ghost) {
    background: #F59E0B;
    color: #0A0A0B;
}
:root[data-theme="light"] .btn:not(.btn-ghost):hover {
    background: #D97706;
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.28);
}
:root[data-theme="light"] .btn-ghost:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* Launch banner keeps the bright amber fill + dark text */
:root[data-theme="light"] .launch-banner {
    background: #F59E0B;
    color: #0A0A0B;
}

/* 404 primary link is a bare <main> child <a>, not a .btn */
:root[data-theme="light"] main > a {
    background: #F59E0B;
    color: #0A0A0B;
}

/* Comparison + fit card tints (hardcoded rgba, can't use vars) */
:root[data-theme="light"] .comparison-card.old {
    background: rgba(185, 28, 28, 0.05);
    border-color: rgba(185, 28, 28, 0.22);
}
:root[data-theme="light"] .comparison-card.new {
    background: rgba(21, 128, 61, 0.06);
    border-color: rgba(21, 128, 61, 0.28);
}
:root[data-theme="light"] .fit-card.yes {
    background: rgba(21, 128, 61, 0.05);
    border-color: rgba(21, 128, 61, 0.22);
}
:root[data-theme="light"] .fit-card.no {
    background: rgba(185, 28, 28, 0.04);
    border-color: rgba(185, 28, 28, 0.18);
}

/* App-demo frame + its heavy dark shadow, softened for light */
:root[data-theme="light"] .app-mockup {
    background: #FFFFFF;
    border-color: var(--border);
    box-shadow:
        0 4px 8px rgba(24, 24, 27, 0.04),
        0 24px 64px rgba(24, 24, 27, 0.10),
        0 0 0 1px rgba(24, 24, 27, 0.03) inset;
}
/* Placeholder mockup internals (used on some pages) */
:root[data-theme="light"] .mockup-titlebar,
:root[data-theme="light"] .mockup-sidebar {
    background: #F7F7F8;
    border-color: var(--border);
}
:root[data-theme="light"] .sb-label,
:root[data-theme="light"] .mockup-col-header { background: #D4D4D8; }
:root[data-theme="light"] .sb-item { background: #E4E4E7; }
:root[data-theme="light"] .mockup-card-placeholder {
    background: #F4F4F5;
    border-color: #E4E4E7;
}

/* Theme-aware logo mark: icon.png is a white mark on black (for dark),
   icon-light.png is a black mark on white (for light). Show one per theme.
   Pure CSS so it respects the manual toggle and never flashes. */
.logo-light { display: none; }
:root[data-theme="light"] .logo-dark { display: none; }
:root[data-theme="light"] .logo-light { display: inline-block; }

/* ─────────────────────────────────────────────
   3. THEME TOGGLE COMPONENT (theme-agnostic)
   ───────────────────────────────────────────── */
.theme-toggle-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.theme-toggle-fixed {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 20;
}

/* right-align the control inside the doc-page top bar */
.top .theme-toggle { margin-left: auto; }

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 100px;
    /* fallbacks: some doc pages don't define every var in dark mode */
    background: var(--bg-card, #161618);
    border: 1px solid var(--border, #27272A);
    line-height: 0;
}

.theme-toggle button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 100px;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.theme-toggle button:hover { color: var(--text-secondary); }

.theme-toggle button svg {
    width: 16px;
    height: 16px;
    display: block;
}

.theme-toggle button[aria-pressed="true"] {
    background: var(--accent-subtle, rgba(245, 158, 11, 0.12));
    color: var(--accent, #F59E0B);
}

.theme-toggle button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle button { transition: none; }
}