/* ─────────────────────────────────────────────────────────────────────
   marketing-theme.css — shared dark-mode layer for ALL marketing pages
   (pennapay.com + pennasystems.com). Linked LAST so its
   :root[data-theme="dark"] block (specificity 0,2,0) wins over any page's
   own :root / inline :root (0,1,0) regardless of source order.

   Dark values mirror frontend/css/penna-tokens.css so marketing and the
   authenticated app read as one family. Covers BOTH token vocabularies:
     • pennasystems / app:  --paper --paper-hi --paper-lo --ink --ink-2
                            --muted --rule --gold
     • pennapay marketing:  --bg --bg-off --ink-soft (+ shared --ink --rule --gold)

   The FOUC bootstrap (byte-identical to dashboard.html) sets
   documentElement.dataset.theme before paint; the toggle (js/theme-toggle.js)
   flips + persists it under localStorage 'penna-theme'.
   ───────────────────────────────────────────────────────────────────── */

:root[data-theme="dark"] {
  /* Paper / ink — pennasystems + app vocabulary */
  --paper:    #1B1A17;
  --paper-hi: #25231F;
  --paper-lo: #14130F;
  --ink:      #F5EFE3;
  --ink-2:    #D9CFB8;
  --muted:    #A89E92;
  --rule:     #3A372F;
  --gold:     #C9A05A;

  /* pennapay marketing vocabulary (index.html, for-freelancers.html, …) */
  --bg:        #1B1A17;
  --bg-off:    #25231F;
  --ink-soft:  #D9CFB8;

  /* Legacy slate aliases (mirror penna-tokens.css so inline var(--slate-*) themes) */
  --slate-50:  var(--paper-hi);
  --slate-100: var(--paper-lo);
  --slate-200: var(--rule);
  --slate-300: var(--rule);
  --slate-400: var(--muted);
  --slate-500: var(--muted);
  --slate-600: var(--ink-2);
  --slate-700: var(--ink-2);
  --slate-800: var(--ink);
  --slate-900: var(--ink);

  /* Accent aliases */
  --accent:       var(--gold);
  --accent-dark:  #B58A3F;
  --accent-light: #3A2F1A;

  /* Elevation — deeper on a dark surface */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 2px 8px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.6);

  color-scheme: dark;
}

/* Nullify any background-color/color transition on the var-driven html/body.
   penna-tokens.css (loaded by faq/create) declares `html,body{…transition:
   background-color 180ms…}`. When a runtime toggle changes only the custom-
   property value — the declared string stays `var(--paper)` — Chrome's
   transition machinery treats the specified value as unchanged and KEEPS THE
   STALE computed colour, so the body never repaints on toggle (verified: a
   transitioned body stayed dark after switching to light for >600ms, while
   the untransitioned footer flipped correctly). Instant flip is correct; the
   FOUC bootstrap already makes the first paint right. Attribute-scoped so it
   wins (0,1,1 / 0,1,2) over `html,body` (0,0,2) regardless of load order. */
html[data-theme] { transition: none; }
html[data-theme] body { transition: none; }

/* ── Hardcoded-light component fixes ───────────────────────────────────
   A handful of marketing components hardcode #fff text on a var(--ink)
   fill. In dark mode var(--ink) becomes light, so #fff text would vanish.
   These selectors are shared across pennapay marketing pages; the
   attribute-scoped rule (0,1,1) beats the page's own .btn-primary (0,1,0). */
:root[data-theme="dark"] .btn-primary { color: var(--paper); }
:root[data-theme="dark"] .btn-primary:hover { color: var(--paper); }
/* pennasystems pill button uses var(--paper-hi) for its label — already
   theme-aware, no override needed. */

/* ── Theme toggle button ───────────────────────────────────────────────
   Icon-only (no copy to translate); aria-label localized in JS.
   currentColor keeps it tinted by the surrounding nav text colour. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2, var(--ink-soft, currentColor));
  cursor: pointer;
  line-height: 0;
  transition: color .15s, border-color .15s, background .15s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.theme-toggle svg { width: 17px; height: 17px; display: block; }

/* Show moon in light mode (→ click to go dark), sun in dark mode (→ light). */
.theme-toggle .ic-sun  { display: none; }
.theme-toggle .ic-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .ic-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }

/* ── Screenshot theme-gating (pennasystems module pages) ───────────────
   Each .sub-shot has a light + a dark <img>; show the one matching the
   theme. NOT a u-hidden class (see project_uhidden_reveal_bug) — pure
   [data-theme] display rules, no JS, no stacking. is-dark hidden by
   default so a missing/!=dark theme never double-renders. */
.sub-shot-img.is-dark { display: none; }
:root[data-theme="dark"] .sub-shot-img.is-light { display: none; }
:root[data-theme="dark"] .sub-shot-img.is-dark  { display: block; }