/* ============================================================================
   theme.css — Light/Dark Mode Override Layer
   ----------------------------------------------------------------------------
   Strategy:
   • Tailwind utility classes (bg-black, text-white, bg-white/X, border-white/X,
     bg-zinc-800, …) and many inline #1C1C1E / rgba(255,255,255,…) values are
     hardcoded throughout the app. Refactoring every call-site would touch
     thousands of strings.
   • Instead, we redefine the *resolved color* via CSS variables and override
     the compiled utility classes when `html.light` is present. This file is
     loaded AFTER tailwind.css so its selectors win on equal specificity.
   • Variables are intentionally split into semantic ("surface", "fg") and
     literal ("white-a10", "black-a30") tokens so both Tailwind utilities and
     custom inline styles can be themed from the same source.
   ============================================================================ */

/* ── Dark theme tokens (default, also applied to .dark) ─────────────────── */
:root,
html.dark {
    /* Semantic surfaces */
    --app-bg:        #000000;
    --app-fg:        #FFFFFF;
    --surface-1:     #1C1C1E;   /* cards, modals */
    --surface-2:     #2C2C2E;   /* metal-card */
    --surface-3:     #3A3A3C;   /* track on toggles, inactive */
    --surface-4:     #4a4a4c;
    --muted-fg:      #8E8E93;   /* secondary text */
    --hairline:      rgba(84, 84, 88, 0.65);

    /* "Inverse" base — for elements that flip black↔white */
    --inverse-bg:    #FFFFFF;
    --inverse-fg:    #000000;

    /* RGB triplets — used inside rgb()/rgba() */
    --rgb-fg:        255, 255, 255;
    --rgb-bg:        0, 0, 0;

    /* Pre-computed translucent fg & bg used by *most* utilities below.
       Keeping them as variables means the .light override only flips two
       numbers instead of duplicating every rule. */
    --fg-a05:        rgba(255, 255, 255, 0.05);
    --fg-a08:        rgba(255, 255, 255, 0.08);
    --fg-a10:        rgba(255, 255, 255, 0.10);
    --fg-a15:        rgba(255, 255, 255, 0.15);
    --fg-a20:        rgba(255, 255, 255, 0.20);
    --fg-a25:        rgba(255, 255, 255, 0.25);
    --fg-a30:        rgba(255, 255, 255, 0.30);
    --fg-a40:        rgba(255, 255, 255, 0.40);
    --fg-a50:        rgba(255, 255, 255, 0.50);
    --fg-a60:        rgba(255, 255, 255, 0.60);
    --fg-a70:        rgba(255, 255, 255, 0.70);
    --fg-a80:        rgba(255, 255, 255, 0.80);
    --fg-a90:        rgba(255, 255, 255, 0.90);

    --bg-a20:        rgba(0, 0, 0, 0.20);
    --bg-a30:        rgba(0, 0, 0, 0.30);
    --bg-a40:        rgba(0, 0, 0, 0.40);
    --bg-a50:        rgba(0, 0, 0, 0.50);
    --bg-a60:        rgba(0, 0, 0, 0.60);

    /* Legacy aliases used by inline <style> in index.html */
    --ios-bg:        var(--app-bg);
    --ios-card:      var(--surface-1);
    --ios-separator: var(--hairline);
    --ios-gray:      var(--muted-fg);
}

/* ── Light theme tokens ─────────────────────────────────────────────────── */
html.light {
    /* Mirrors iOS grouped-table look: page = off-white, cards = pure white.
       (Previously the page was #FFFFFF and cards were #F2F2F7 — swapped here
       so cards now visually "lift" above the page like in the iOS Settings app.) */
    --app-bg:        #F2F2F7;   /* off-white page background */
    --app-fg:        #000000;
    --surface-1:     #FFFFFF;   /* pure white cards / list groups */
    --surface-2:     #E5E5EA;
    --surface-3:     #D1D1D6;
    --surface-4:     #C7C7CC;
    --muted-fg:      #6E6E73;
    --hairline:      rgba(60, 60, 67, 0.29);

    --inverse-bg:    #000000;
    --inverse-fg:    #FFFFFF;

    --rgb-fg:        0, 0, 0;
    --rgb-bg:        242, 242, 247;   /* matches --app-bg for translucent overlays */

    /* In light mode the "foreground accent" used for borders/dividers/hover
       layers is dark-on-light — so these flip to black-based rgba. */
    --fg-a05:        rgba(0, 0, 0, 0.04);
    --fg-a08:        rgba(0, 0, 0, 0.06);
    --fg-a10:        rgba(0, 0, 0, 0.08);
    --fg-a15:        rgba(0, 0, 0, 0.12);
    --fg-a20:        rgba(0, 0, 0, 0.14);
    --fg-a25:        rgba(0, 0, 0, 0.18);
    --fg-a30:        rgba(0, 0, 0, 0.22);
    --fg-a40:        rgba(0, 0, 0, 0.36);
    --fg-a50:        rgba(0, 0, 0, 0.48);
    --fg-a60:        rgba(0, 0, 0, 0.58);
    --fg-a70:        rgba(0, 0, 0, 0.68);
    --fg-a80:        rgba(0, 0, 0, 0.78);
    --fg-a90:        rgba(0, 0, 0, 0.88);

    /* black/X tints become a faint dark wash on white */
    --bg-a20:        rgba(0, 0, 0, 0.05);
    --bg-a30:        rgba(0, 0, 0, 0.08);
    --bg-a40:        rgba(0, 0, 0, 0.10);
    --bg-a50:        rgba(0, 0, 0, 0.12);
    --bg-a60:        rgba(0, 0, 0, 0.16);
}

/* ============================================================================
   Element base — body color/background now follow the theme.
   The `html.light` / `html.dark` form is needed (spec 0,1,1) so it beats
   Tailwind's `.bg-black` rule that sits on the <html> element itself
   (`<html class="bg-black text-white …">`). Without this boost, the html
   keeps its compiled black background and shows through during overscroll /
   rubber-band scrolling in light mode.
   ============================================================================ */
html.dark,
html.light,
body {
    background-color: var(--app-bg);
    color: var(--app-fg);
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Auth overlay & splash use bg-black inline — gets caught by .bg-black below */

/* ============================================================================
   Tailwind utility overrides
   We deliberately target only the .light branch; the default (.dark / :root)
   keeps Tailwind's compiled values intact for full backward compatibility.
   ============================================================================ */
html.light .bg-black            { background-color: var(--app-bg) !important; }
html.light .bg-white            { background-color: var(--inverse-bg) !important; color: var(--inverse-fg); }
html.light .bg-zinc-800         { background-color: var(--surface-3) !important; }

html.light .text-black          { color: var(--inverse-fg) !important; }
html.light .text-white          { color: var(--app-fg) !important; }
html.light .text-zinc-500       { color: var(--muted-fg) !important; }

html.light .border-white        { border-color: var(--app-fg) !important; }
html.light .accent-white        { accent-color: var(--app-fg) !important; }

/* Alpha variants — black/X and white/X --------------------------------- */
html.light .bg-black\/20        { background-color: var(--bg-a20) !important; }
html.light .bg-black\/30        { background-color: var(--bg-a30) !important; }
html.light .bg-black\/40        { background-color: var(--bg-a40) !important; }
html.light .bg-black\/50        { background-color: var(--bg-a50) !important; }
html.light .bg-black\/60        { background-color: var(--bg-a60) !important; }

html.light .bg-white\/5         { background-color: var(--fg-a05) !important; }
html.light .bg-white\/8         { background-color: var(--fg-a08) !important; }
html.light .bg-white\/10        { background-color: var(--fg-a10) !important; }
html.light .bg-white\/20        { background-color: var(--fg-a20) !important; }
html.light .bg-white\/25        { background-color: var(--fg-a25) !important; }
html.light .bg-white\/30        { background-color: var(--fg-a30) !important; }
html.light .bg-white\/90        { background-color: var(--fg-a90) !important; }

html.light .text-black\/50      { color: rgba(var(--rgb-bg), 0.6) !important; }
html.light .text-white\/30      { color: var(--fg-a30) !important; }
html.light .text-white\/40      { color: var(--fg-a40) !important; }
html.light .text-white\/50      { color: var(--fg-a50) !important; }
html.light .text-white\/60      { color: var(--fg-a60) !important; }
html.light .text-white\/70      { color: var(--fg-a70) !important; }
html.light .text-white\/80      { color: var(--fg-a80) !important; }
html.light .text-white\/90      { color: var(--fg-a90) !important; }

html.light .border-white\/5     { border-color: var(--fg-a05) !important; }
html.light .border-white\/8     { border-color: var(--fg-a08) !important; }
html.light .border-white\/10    { border-color: var(--fg-a10) !important; }
html.light .border-white\/15    { border-color: var(--fg-a15) !important; }
html.light .border-white\/20    { border-color: var(--fg-a20) !important; }
html.light .border-white\/25    { border-color: var(--fg-a25) !important; }
html.light .border-white\/30    { border-color: var(--fg-a30) !important; }
html.light .border-white\/40    { border-color: var(--fg-a40) !important; }
html.light .border-white\/80    { border-color: var(--fg-a80) !important; }

html.light .placeholder-white\/25::placeholder { color: var(--fg-a25) !important; }

/* Gradients — from-black / from-white/5 ----------------------------------- */
html.light .from-black          { --tw-gradient-from: var(--app-bg) var(--tw-gradient-from-position) !important;
                                  --tw-gradient-to:   rgba(var(--rgb-bg), 0) var(--tw-gradient-to-position) !important;
                                  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html.light .from-white\/5       { --tw-gradient-from: var(--fg-a05) var(--tw-gradient-from-position) !important;
                                  --tw-gradient-to:   rgba(var(--rgb-fg), 0) var(--tw-gradient-to-position) !important;
                                  --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important; }

/* Selection ------------------------------------------------------------- */
html.light .selection\:bg-zinc-800 *::selection,
html.light.selection\:bg-zinc-800 *::selection { background-color: var(--surface-3); }
html.light::selection,
html.light *::selection         { background-color: var(--surface-2); }

/* ============================================================================
   Arbitrary-value Tailwind classes used in markup: bg-[#1C1C1E], bg-[#3A3A3C],
   text-[#8E8E93], etc. — these compile to literal hex. Override directly.
   ============================================================================ */
html.light .bg-\[\#1C1C1E\]     { background-color: var(--surface-1) !important; }
html.light .bg-\[\#2A2A2E\]     { background-color: var(--surface-1) !important; }
html.light .bg-\[\#2C2C2E\]     { background-color: var(--surface-2) !important; }
html.light .bg-\[\#3A3A3C\]     { background-color: var(--surface-3) !important; }
html.light .bg-\[\#636366\]     { background-color: var(--surface-4) !important; }
html.light .bg-\[\#8E8E93\]     { background-color: var(--muted-fg) !important; }
html.light .bg-\[\#000\]        { background-color: var(--app-bg) !important; }
html.light .bg-\[\#000000\]     { background-color: var(--app-bg) !important; }

html.light .text-\[\#8E8E93\]   { color: var(--muted-fg) !important; }
html.light .text-\[\#636366\]   { color: var(--muted-fg) !important; }
html.light .text-\[\#3A3A3C\]   { color: var(--surface-3) !important; }

html.light .border-\[\#1C1C1E\] { border-color: var(--surface-1) !important; }
html.light .border-\[\#2C2C2E\] { border-color: var(--surface-2) !important; }
html.light .border-\[\#3A3A3C\] { border-color: var(--surface-3) !important; }
html.light .border-\[\#8E8E93\] { border-color: var(--muted-fg) !important; }

/* Arbitrary hex + alpha modifier (e.g. `bg-[#1C1C1E]/90` on the bottom nav).
   Tailwind compiles these to rgba(28,28,30,0.9) — we override per surface. */
html.light .bg-\[\#1C1C1E\]\/50  { background-color: rgba(242, 242, 247, 0.7) !important; }
html.light .bg-\[\#1C1C1E\]\/90  { background-color: rgba(242, 242, 247, 0.92) !important; }
html.light .bg-\[\#636366\]\/10  { background-color: var(--fg-a10) !important; }
html.light .border-\[\#8E8E93\]\/40 { border-color: rgba(110, 110, 115, 0.4) !important; }
html.light .text-\[\#8E8E93\]\/60   { color: rgba(110, 110, 115, 0.6) !important; }
html.light .text-\[\#8E8E93\]\/70   { color: rgba(110, 110, 115, 0.7) !important; }

/* Accent (status) colors — #FF3B30, #34C759, #0A84FF, #FFCC00, #FF9F0A, #FF9500,
   #BF5AF2, #FF375F, #64D2FF, #32ADE6, #30D158, #4a1c1c, #7d2020, #b82323, #e62e2e
   intentionally NOT remapped: they convey semantic meaning (error / success /
   warning / info) and should look identical in both themes. */

/* focus-within & hover variants of arbitrary white/X ---------------------- */
html.light .focus-within\:border-white\/30:focus-within { border-color: var(--fg-a30) !important; }
html.light .focus-within\:bg-white\/\[0\.01\]:focus-within { background-color: rgba(var(--rgb-fg), 0.04) !important; }
html.light .focus\:border-white:focus  { border-color: var(--app-fg) !important; }
html.light .focus\:bg-white:focus      { background-color: var(--inverse-bg) !important; }
html.light .hover\:bg-white\/5:hover { background-color: var(--fg-a05) !important; }
html.light .hover\:bg-white:hover    { background-color: var(--inverse-bg) !important; }
html.light .hover\:text-white:hover  { color: var(--app-fg) !important; }
html.light .active\:bg-white\/5:active { background-color: var(--fg-a05) !important; }
html.light .placeholder\:text-\[\#8E8E93\]::placeholder { color: var(--muted-fg) !important; }
html.light .placeholder\:text-\[\#636366\]::placeholder { color: var(--muted-fg) !important; }

/* ============================================================================
   Inline-style / engraved-text fixups for light mode.
   The metal collector card and several decorative surfaces still want a
   dark look — explicitly keep them dark to preserve the brand aesthetic.
   ============================================================================ */
html.light .metal-collector-card {
    /* keep metal card dark — its design language is "engraved on dark metal" */
    color: rgba(255,255,255,0.95);
}
html.light .engraved-text     { color: rgba(255,255,255,0.90); }
html.light #greeting.engraved-text { color: rgba(255,255,255,0.78); }
html.light #score.engraved-text    { color: rgba(255,255,255,0.95); }
html.light #score.engraved-text span { color: rgba(255,255,255,0.60); }

/* Splash + auth overlay backgrounds use inline style="background:#000".
   The inline style would normally win — but we override via a more-specific
   data attribute that theme.js sets at boot. */
html.light #splash-screen[data-theme-aware="1"]  { background: var(--app-bg) !important; }
html.light #auth-overlay[data-theme-aware="1"]   { background: var(--app-bg) !important; }
html.light #preview-card-wrapper[data-theme-aware="1"],
html.light #preview-card-wrapper[data-pinned="1"][data-theme-aware="1"] { background: var(--app-bg) !important; }

/* Heatmap-hole pulse keeps its dark aesthetic — readable on light too */
html.light .heatmap-hole       { background-color: var(--surface-3); }

/* sk shimmer skeleton — match surface palette in light mode */
html.light .sk {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
}

/* Webkit autofill inset background — was hardcoded to #1C1C1E */
html.light input:-webkit-autofill,
html.light input:-webkit-autofill:hover,
html.light input:-webkit-autofill:focus,
html.light input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--surface-1) inset !important;
    box-shadow:        0 0 0 1000px var(--surface-1) inset !important;
    -webkit-text-fill-color: var(--app-fg) !important;
    caret-color: var(--app-fg);
}

/* badge-unlock-bg dim overlay — keep dimming but use neutral wash */
html.light .badge-unlock-bg    { background: rgba(0, 0, 0, 0.55); }

/* Card pin button — light variant */
html.light #card-pin-btn {
    background: rgba(var(--rgb-bg), 0.7);
    border-color: var(--fg-a15);
}
html.light #pin-icon { color: rgba(var(--rgb-fg), 0.65); }

/* nav bar — pure black backdrop in dark, neutral surface in light */
html.light nav.bg-black\/60     { background-color: rgba(var(--rgb-bg), 0.78) !important; }

/* HR borders inside auth card use border-white/10 already → covered above */

/* Password-strength checklist (auth screen) hardcodes rgba(255,255,255,…) via
   inline style on .req-circle and .req-text. Inline style would normally
   "win" — beat it with !important + higher specificity. */
html.light #auth-pw-checklist .req-circle  { border-color: var(--fg-a30) !important; }
html.light #auth-pw-checklist .req-text    { color: var(--fg-a60) !important; }
html.light #auth-pw-checklist .req-check,
html.light #auth-pw-checklist .req-warn    { color: var(--inverse-fg) !important; }

/* `<input type="range">` fallback track for slider in Appearance subpage
   uses `bg-[#3A3A3C]` which is already covered. The `accent-white` flips
   the thumb to use the app foreground color in light mode. */
html.light input[type="range"].accent-white { accent-color: var(--app-fg); }

/* Arbitrary `text-[XX]` size classes don't carry color — they're safe.
   Arbitrary `bg-white/[0.01]` and `bg-white/[0.X]` literal opacities */
html.light .bg-white\/\[0\.01\] { background-color: rgba(var(--rgb-fg), 0.03) !important; }