/* ============================================================================
   Power Pals — website dark theme (shared across all pages)
   ----------------------------------------------------------------------------
   Toggle mechanism: [data-theme="dark"] on <html> (set by theme.js).
   IMPORTANT: we deliberately do NOT key off `.dark` — the marketing pages
   already use `.pp-deck .dark` as a styled dark *band*, so reusing `.dark`
   would collide. data-theme keeps the theme switch fully isolated.

   Strategy: a global override layer. The website's colour usage is
   role-consistent (unlike the app), so we can flip everything from one
   stylesheet with ZERO markup changes:
     1. override the existing warm token vars (--bg/--ink/--body/...).
     2. override the common Tailwind utility classes under the dark selector
        (specificity [data-theme=dark] .util = 0,2,0 beats the 0,1,0 utility,
        and only applies when dark is active).
   Link this AFTER the page's inline <style> so the var overrides win on ties.
   ============================================================================ */

/* 1) Warm dark palette — seeded from the existing `.pp-deck .dark` band. */
[data-theme="dark"] {
    --bg:     #1a1816;   /* warm near-black page canvas */
    --ink:    #FCFAF3;   /* warm white — headings/primary text */
    --body:   #c9c2b4;   /* warm body text */
    --muted:  #a8a193;   /* warm muted text */
    --card:   #232019;   /* raised card surface */
    /* --panel intentionally NOT overridden: .diagram-card uses it as a LIGHT
       frame holding the light SVG illustration on the dark diagram band. */
    --border: rgba(252, 250, 243, 0.12);
    --faint:  rgba(252, 250, 243, 0.07);
    /* gold accent stays, but the light gold-tint icon/wash background needs a
       dark translucent variant so icon squares don't render as light blocks. */
    --gold-tint: rgba(242, 169, 28, 0.14);
    /* light-theme AA text golds (index.html) go back to the bright golds on dark */
    --gold-ink: #E89A12;
    --gold-strong: #F2A91C;
    color-scheme: dark;
}

/* 2) Tailwind utility overrides (apply only in dark) ------------------------ */
/* text — dark text roles flip to light */
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-brand-dark      { color: var(--ink); }
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500        { color: var(--body); }
[data-theme="dark"] .text-gray-400,
[data-theme="dark"] .text-gray-300        { color: var(--muted); }
/* nav/link hover that resolves to brand-dark should brighten in dark */
[data-theme="dark"] .hover\:text-brand-dark:hover { color: var(--ink); }

/* surfaces */
[data-theme="dark"] .bg-white             { background-color: var(--card); }
/* guide/legal pages set the page canvas via the arbitrary class bg-[#FCFAF3]
   (the homepage uses body{background:var(--bg)} instead — both covered). */
[data-theme="dark"] .bg-\[\#FCFAF3\]      { background-color: var(--bg); }
[data-theme="dark"] .bg-gray-50           { background-color: var(--bg); }
[data-theme="dark"] .bg-gray-100          { background-color: var(--panel); }
[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--panel); }

/* borders */
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300      { border-color: var(--border); }

/* nav uses the opacity variant bg-white/90 (frosted) — not caught by .bg-white */
[data-theme="dark"] .bg-white\/90         { background-color: rgba(26, 24, 22, 0.85); }

/* logo wordmark "power…ai" is hardcoded dark (#1a1a1a) — invisible on dark nav.
   The "pals" half uses the gold gradient and stays. */
[data-theme="dark"] .pp-mark .pp-plain    { color: var(--ink); }
/* active nav link is `#1A1A1A !important` — needs !important to flip on dark nav */
[data-theme="dark"] .nav-link.active      { color: var(--ink) !important; }

/* ---- homepage .pp-deck system ----------------------------------------------
   The deck hardcodes #fff / white gradients for its bands and cards (it does
   NOT use var(--card)), so the var overrides above can't reach them. Flip the
   light surfaces explicitly. Already-dark deck pieces (.diagram-band, .dark,
   .tile, .diagram-card) are left alone. */
[data-theme="dark"] .pp-deck #what,
[data-theme="dark"] .pp-deck .alt         { background: #201d18; }
[data-theme="dark"] .pp-deck .mini,
[data-theme="dark"] .pp-deck .quote,
[data-theme="dark"] .pp-deck .mech,
[data-theme="dark"] .pp-deck .app,
[data-theme="dark"] .pp-deck .stat,
[data-theme="dark"] .pp-deck .btn-ghost,
[data-theme="dark"] .pp-deck .step::after { background: #2a2723; }
/* gold pill tags: dark-gold text would be unreadable on the dark gold-tint wash */
[data-theme="dark"] .pp-deck .who-tags span { color: var(--gold-soft); border-color: rgba(242, 169, 28, 0.3); }

/* ---- guide / legal / standalone page custom classes ------------------------
   These pages don't use .pp-deck; they hardcode #1A1A1A headings, #f9fafb table
   headers, #fff cards/badges, and Tailwind `to-white` gradient heroes. */
/* hardcoded dark headings -> light */
[data-theme="dark"] .legal-content h2,
[data-theme="dark"] .legal-content h3,
[data-theme="dark"] .legal-content h4,
[data-theme="dark"] .content h2,
[data-theme="dark"] .content h3,
[data-theme="dark"] .trust-card h3        { color: var(--ink); }
/* light table headers -> dark surface + light text */
[data-theme="dark"] .legal-content th,
[data-theme="dark"] .content th,
[data-theme="dark"] .sec-table th         { background: var(--card); color: var(--ink); }
/* code blocks, cards, badges */
[data-theme="dark"] .legal-content code   { background-color: var(--card); }
[data-theme="dark"] .trust-card,
[data-theme="dark"] .tier-badge           { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .ic-badge             { background: rgba(242, 169, 28, 0.14); }
/* status pills (semantic) — flip fill + text together */
[data-theme="dark"] .pill-live            { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
[data-theme="dark"] .pill-roadmap         { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
/* guide-page hero gradients fade `to-white` — repoint that stop to the dark canvas */
[data-theme="dark"] .to-white             { --tw-gradient-to: var(--bg) var(--tw-gradient-to-position, ); }

/* theme-toggle icon swap (vanilla, no Alpine needed) — moon in light, sun in dark */
.pp-theme-toggle .pp-icon-sun { display: none; }
[data-theme="dark"] .pp-theme-toggle .pp-icon-moon { display: none; }
[data-theme="dark"] .pp-theme-toggle .pp-icon-sun { display: inline-block; }

/* scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track { background: #221f1a; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #4a463d; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #5c574b; }

/* 2b) Light theme text contrast (October 5, 2026; WCAG AA, axe color-contrast) --------
   The muted gray and amber text were below 4.5:1 on the light canvases. Each is
   darkened one step in the LIGHT theme only; the dark theme keeps its own roles
   above. Dark bands inside light pages (footers, the dark pricing card, CTA
   panels: .bg-brand-dark) keep a light gray and the bright amber instead. */
:root:not([data-theme="dark"]) .text-gray-400      { color: #6b7280; } /* gray-500 */
:root:not([data-theme="dark"]) .text-brand-amber   { color: #9a5b00; } /* dark amber ink */
:root:not([data-theme="dark"]) .text-emerald-600   { color: #047857; } /* emerald-700 */
:root:not([data-theme="dark"]) .bg-brand-dark .text-gray-400,
:root:not([data-theme="dark"]) .bg-brand-dark .text-gray-500 { color: #9ca3af; }
:root:not([data-theme="dark"]) .bg-brand-dark .text-brand-amber { color: #F5A623; }

/* 3) Exception pins (must come LAST to win same-specificity ties) ----------- */
/* Gold buttons are gold in BOTH themes → keep their dark text (AA 8.7 on gold).
   Without this, the .text-brand-dark override would make them light-on-gold. */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] a.btn-primary { color: #1a1a1a; }

/* Pricing band (dark) — a rich molten-gold glow fading to the warm-dark canvas.
   Mirrors the light golden treatment in index.html so the section stays a
   premium gold band in both themes, while keeping light heading/body text
   readable. ID (#pricing) beats the page's bg-gray-50/30 utility. */
[data-theme="dark"] #pricing {
    background:
        radial-gradient(120% 85% at 50% 0%, rgba(251, 199, 74, 0.32) 0%, rgba(180, 120, 20, 0.18) 40%, transparent 70%),
        linear-gradient(180deg, #2b2109 0%, #221a0e 46%, var(--bg) 100%);
}
/* text-white stays white (sits on dark/gold/coloured fills) — intentionally
   not overridden. bg-brand-dark stays dark (already a dark band). */