/* ============================================================================
   Tabs shared theme — Light / Dark (2026-09-27)
   First-party only. Applied via <html data-theme="light|dark">, set before
   first paint by /theme-init.js. Dark is the historical design and stays the
   default; light overrides live under html[data-theme="light"].
   Light tokens (Mira spec): bg #F4F4F8, cards #FAFAFC (never pure white),
   ink #14141C / #5A5A6E, hairline #DFDFE8. Accent #6A5AFF is kept for filled
   controls (white on it is 4.65:1); accent *text* uses #5445CC (4.26:1 would
   fail, #5445CC passes on light surfaces).
   ========================================================================== */

/* ---- Shared: accent ink token (text-safe accent for each theme) ---- */
:root { --accent-ink: #b9b2ff; }
html[data-theme="light"] { --accent-ink: #5445CC; }

/* ============================================================================
   Theme toggle control (injected by /theme.js) — single sun/moon icon button.
   ========================================================================== */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    border: 1px solid rgba(127, 127, 143, 0.32);
    background: rgba(127, 127, 143, 0.12);
    color: var(--text, #f5f5f5); cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.theme-toggle:hover { background: rgba(127, 127, 143, 0.24); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle:focus-visible {
    outline: 2px solid var(--accent, #6a5aff); outline-offset: 2px;
}
.theme-toggle svg { width: 20px; height: 20px; display: block; }
/* Placement: marketing header nav */
.site-nav .theme-toggle { margin-left: 0.5rem; }
/* Placement: app header navs (dashboard, login) */
nav.glass .theme-toggle { margin-right: 0.5rem; }
/* Desktop: the .nav-actions wrapper is display:contents so the toggle
   participates directly in .nav-content — hamburger hidden, nav links
   shown, toggle keeps its exact current placement. */
.site-nav .nav-actions { display: contents; }
/* Floating fallback (pages without a nav) */
.theme-toggle--floating {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 900;
    background: var(--surface, #121218);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

/* ============================================================================
   MOBILE HEADER LAYOUT (Mira spec, 2026-09-27)
   Applies at the same breakpoint where the hamburger replaces the nav links
   (max-width:899px in site.css). Flexbox: logo left, .nav-actions right group
   (display:flex, gap:8px) with theme toggle FIRST and hamburger LAST —
   hamburger sits at the far-right edge (thumb-reach zone). Toggle is bare
   (no circle), 24px glyph, ~2px stroke, currentColor (= theme foreground
   text color on the header background in both themes). Each tap target is
   exactly 44x44px, vertically centered against the logo. The group is
   fixed-size in both themes — no layout shift when toggling light/dark.
   Desktop is untouched.
   ========================================================================== */
@media (max-width: 899px) {
    .site-nav { height: 64px; }
    .site-nav .nav-content { padding-left: 16px; padding-right: 16px; }
    .site-nav .nav-actions { display: flex; align-items: center; gap: 8px; }
    .site-nav .theme-toggle {
        width: 44px; height: 44px; margin-left: 0;
        border: none; border-radius: 50%; background: transparent;
        color: var(--text, #f5f5f5);
    }
    .site-nav .theme-toggle svg { width: 24px; height: 24px; }
    .site-nav .theme-toggle:hover,
    .site-nav .theme-toggle:focus-visible { background: rgba(255, 255, 255, 0.08); }
    .site-nav .nav-toggle { width: 44px; height: 44px; margin: 0; }
}
html[data-theme="light"] .site-nav .theme-toggle:hover,
html[data-theme="light"] .site-nav .theme-toggle:focus-visible {
    background: rgba(0, 0, 0, 0.06);
}

/* ============================================================================
   LIGHT THEME — marketing pages (site.css variables + hardcoded fixes)
   ========================================================================== */
html[data-theme="light"] {
    --bg: #F4F4F8;
    --surface: #FAFAFC;
    --border: #DFDFE8;
    --text: #14141C;
    --text-muted: #5A5A6E;
    --accent: #6A5AFF;
    --accent-soft: rgba(84, 69, 204, 0.12);
    --accent-glow: rgba(106, 90, 255, 0.28);
    --card-top-highlight: inset 0 1px 0 #ffffff;
    --bg-color: #F4F4F8;
    --primary-color: #6A5AFF;
    --primary-glow: rgba(106, 90, 255, 0.25);
    --secondary-color: #C62828;
    --text-main: #14141C;
    --glass-bg: rgba(244, 244, 248, 0.72);
    --glass-border: #DFDFE8;
}
/* Hardcoded dark surfaces in site.css */
html[data-theme="light"] .site-nav { background: rgba(244, 244, 248, 0.86); }
/* Dashboard / login header: style.css pins a dark glass bar with !important,
   so the light override needs equal force. Dark rule untouched. */
html[data-theme="light"] nav.glass {
    background: rgba(250, 250, 252, 0.92) !important;
    border-bottom: 1px solid #DFDFE8 !important;
    box-shadow: 0 4px 30px rgba(20, 20, 40, 0.08) !important;
}
/* Mobile fullscreen menus (2026-09-27): site.css pins the marketing menu to
   #0a0a0ef7 and style.css pins the app (login) menu to rgba(10,10,14,.75)
   !important, while the links follow the theme ink vars — dark-on-dark in
   light mode. Light gets a light surface; dark keeps its dark surface
   untouched. Link ink: #14141C on #FAFAFC ≈ 15:1 (light), #F5F5F5 on
   #0A0A0E ≈ 15:1 (dark) — AA in both. The "Join the Beta" .btn-primary
   stays accent (#6A5AFF, white text 4.65:1) in both modes. */
html[data-theme="light"] .site-nav .nav-links { background: rgba(250, 250, 252, 0.97); }
html[data-theme="light"] .site-nav .nav-links a:not(.btn) { color: #14141C; }
html[data-theme="light"] nav.glass .nav-links { background: rgba(250, 250, 252, 0.96) !important; }
html[data-theme="light"] nav.glass .nav-links a:not(.btn-primary) { color: #14141C; }
html[data-theme="light"] .sticky-cta { background: rgba(250, 250, 252, 0.92); }
html[data-theme="light"] .btn-secondary { background: rgba(20, 20, 28, 0.05); }
html[data-theme="light"] .btn-secondary:hover { background: rgba(20, 20, 28, 0.09); }
html[data-theme="light"] .cookie-notice { background: rgba(250, 250, 252, 0.96); }
html[data-theme="light"] .site-footer { background: rgba(20, 20, 28, 0.02); }
html[data-theme="light"] .triad,
html[data-theme="light"] .privacy-badge { background: rgba(20, 20, 28, 0.03); }
html[data-theme="light"] .slider-arrow:hover { background: rgba(20, 20, 28, 0.06); }
html[data-theme="light"] .persona-card:hover,
html[data-theme="light"] .feature-card:hover { border-color: rgba(84, 69, 204, 0.45); }
/* Big outlined display words (dark-theme decoration) */
html[data-theme="light"] .chapter-num { -webkit-text-stroke-color: rgba(20, 20, 28, 0.22); }
/* Film-grain overlay is tuned for dark; soften on light */
html[data-theme="light"] body::after { opacity: 0.02; }

/* ============================================================================
   LIGHT THEME — login / auth (auth.css hardcoded dark panels, real selectors)
   ========================================================================== */
html[data-theme="light"] .auth-page-wrapper { background: var(--bg); }
html[data-theme="light"] .auth-shell {
    background: #FFFFFF;
    box-shadow: 0 30px 80px rgba(20, 20, 40, 0.12), 0 0 0 1px var(--border);
}
html[data-theme="light"] .auth-blade-overlay {
    background: linear-gradient(135deg, #FFFFFF 0%, #F4F4F8 45%, #E9E9F0 75%, #FAFAFC 100%);
    box-shadow: -20px 0 60px rgba(84, 69, 204, 0.18),
        20px 0 60px rgba(20, 20, 40, 0.18),
        inset 2px 0 0 rgba(255, 255, 255, 0.9),
        inset -2px 0 0 rgba(84, 69, 204, 0.25);
}
html[data-theme="light"] .blade-inner-glow {
    background: radial-gradient(circle at 50% 50%, rgba(84, 69, 204, 0.10) 0%, transparent 65%);
}
html[data-theme="light"] .panel-left { background: #FAFAFC; color: var(--text); }
html[data-theme="light"] .panel-right,
html[data-theme="light"] .auth-shell[data-mode="signup"] .panel-left {
    background: linear-gradient(145deg, #F4F4F8 0%, #E9E9F0 100%);
    color: var(--text);
}
html[data-theme="light"] .auth-shell[data-mode="signup"] .panel-right {
    background: #FAFAFC; color: var(--text);
}
html[data-theme="light"] .auth-form-header p,
html[data-theme="light"] .checkbox-label,
html[data-theme="light"] .terms-text,
html[data-theme="light"] .auth-switch-text,
html[data-theme="light"] .support-copy,
html[data-theme="light"] .req-item,
html[data-theme="light"] .req-item::before,
html[data-theme="light"] .toggle-password-btn,
html[data-theme="light"] .auth-subtle,
html[data-theme="light"] .auth-hint { color: var(--text-secondary); }
html[data-theme="light"] .form-field label,
html[data-theme="light"] .requirements-title,
html[data-theme="light"] .highlight-text { color: var(--text); }
html[data-theme="light"] .input-wrapper input {
    background: #FFFFFF; border-color: var(--border); color: var(--text);
}
html[data-theme="light"] .input-wrapper input::placeholder { color: #8A8AA3; }
html[data-theme="light"] .input-wrapper input:focus {
    background: #FAFAFC;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(84, 69, 204, 0.14);
}
html[data-theme="light"] .input-wrapper input.invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12);
}
html[data-theme="light"] .toggle-password-btn:hover {
    color: var(--accent-ink); background: rgba(84, 69, 204, 0.08);
}
html[data-theme="light"] .field-error { color: var(--danger); }
html[data-theme="light"] .req-item.valid,
html[data-theme="light"] .req-item.valid::before { color: var(--success); }
html[data-theme="light"] .password-requirements {
    background: rgba(20, 20, 28, 0.03); border-color: var(--border);
}
html[data-theme="light"] .auth-alert-banner.error {
    background: rgba(198, 40, 40, 0.08); border-color: var(--danger); color: var(--danger);
}
html[data-theme="light"] .auth-alert-banner.success {
    background: rgba(46, 125, 50, 0.08); border-color: var(--success); color: var(--success);
}
html[data-theme="light"] .auth-switch-btn,
html[data-theme="light"] .forgot-pass-link,
html[data-theme="light"] .terms-text a { color: var(--accent-ink); }
html[data-theme="light"] .auth-switch-btn:hover { color: #4538B8; }
html[data-theme="light"] .auth-submit-btn {
    box-shadow: 0 6px 18px rgba(84, 69, 204, 0.35);
}
html[data-theme="light"] .support-badge {
    background: rgba(84, 69, 204, 0.10);
    border-color: rgba(84, 69, 204, 0.30);
    color: var(--accent-ink);
}
html[data-theme="light"] .support-heading {
    background: none; -webkit-text-fill-color: var(--text); color: var(--text);
}
html[data-theme="light"] .highlight-icon {
    background: rgba(84, 69, 204, 0.08);
    border-color: rgba(84, 69, 204, 0.20);
    color: var(--accent-ink);
}
html[data-theme="light"] .support-footer { border-top-color: var(--border); }

/* ============================================================================
   LIGHT THEME — dashboard (:root vars)
   ========================================================================== */
html[data-theme="light"] {
    --surface-2: #FAFAFC;
    --surface-3: #E9E9F0;
    --border-soft: #E9E9F0;
    --accent-dim: rgba(106, 90, 255, 0.10);
    --accent-line: rgba(106, 90, 255, 0.35);
    --success: #0E7C7B;
    --danger: #C62828;
}
html[data-theme="light"] .logs-timeline::-webkit-scrollbar-thumb,
html[data-theme="light"] .modal-body::-webkit-scrollbar-thumb {
    background: rgba(20, 20, 28, 0.18);
}
/* Chart tooltip overrides are handled in dashboard.js via dashColors();
   canvas cannot read CSS vars. */

/* ============================================================================
   LIGHT THEME — reset-password page (:root vars)
   ========================================================================== */
html[data-theme="light"] {
    --surface-color: #FAFAFC;
    --surface-high: #E9E9F0;
    --text-primary: #14141C;
    --text-secondary: #5A5A6E;
    --accent-color: #0E7C7B;
}
/* Hardcoded dark card + error text */
html[data-theme="light"] body.reset-page .container {
    background-color: rgba(250, 250, 252, 0.85);
    box-shadow: 0 25px 50px -12px rgba(20, 20, 40, 0.18), 0 0 40px rgba(106, 90, 255, 0.12);
}
html[data-theme="light"] body.reset-page .error { color: #C62828; }

/* ============================================================================
   DARK THEME — light-native legal/account pages (privacy, terms, delete-account)
   These pages ship a light design; dark variants keep the toggle meaningful.
   Scoped by body class so other pages are untouched.
   ========================================================================== */
html[data-theme="dark"] body.legal-page,
html[data-theme="dark"] body.account-page { background-color: #0A0A0E; color: #DCDCE8; }
html[data-theme="dark"] body.legal-page .container,
html[data-theme="dark"] body.account-page .container {
    background: #121218; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] body.legal-page h1,
html[data-theme="dark"] body.account-page h1 { color: #F5F5F5; border-bottom-color: #2A2A35; }
html[data-theme="dark"] body.legal-page h2 { color: #E8E8F0; }
html[data-theme="dark"] body.legal-page h3 { color: #C4C4D4; }
html[data-theme="dark"] body.legal-page .footer,
html[data-theme="dark"] body.account-page .footer { color: #8A8A9A; }
html[data-theme="dark"] body.account-page p { color: #B9B9C9; }
html[data-theme="dark"] body.account-page label { color: #E8E8F0; }
html[data-theme="dark"] body.account-page input[type="email"],
html[data-theme="dark"] body.account-page input[type="password"] {
    background: #0C0C12; border-color: #2E2E3A; color: #F5F5F5;
}
html[data-theme="dark"] body.account-page .loading { color: #8A8A9A; }