/* Resumi site theming.
 *
 * Light is the default: every page carries its own inline <style> with the
 * full palette on :root. This file only adds the dark overrides, applied
 * under html[data-theme="dark"] (set before first paint by the inline init
 * script in each page's <head>, toggled by #theme-toggle, persisted in
 * localStorage under "resumi-theme").
 *
 * Specificity note: html[data-theme="dark"] (0,1,1) beats the pages' :root
 * (0,1,0), so token overrides win regardless of load order.
 *
 * Theme-aware assets: give an <img>/<video> a data-dark-src attribute and
 * theme.js swaps it (and data-dark-poster for videos) when the theme flips.
 * Light stays the fallback while no dark captures exist.
 */

html[data-theme="dark"] {
  color-scheme: dark;

  --ink: oklch(93% 0.006 264);
  --ink-2: oklch(72% 0.008 264);
  --ink-3: oklch(56% 0.008 264);
  --bg: oklch(16.5% 0.006 80);
  --surface: oklch(20.5% 0.008 264);
  --accent: oklch(72% 0.16 267);
  --accent-hover: oklch(64% 0.16 267);
  --accent-soft: oklch(27% 0.045 267);
  --green: oklch(75% 0.14 162);
  --border: oklch(29% 0.008 264);
}

/* --- Ink-background controls: label flips to page-dark, not literal #fff --- */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] header nav a.nav-pricing,
html[data-theme="dark"] .feature.feature-cta .cta-link,
html[data-theme="dark"] .mobile-link-row button,
html[data-theme="dark"] .site-nav .nav-download,
html[data-theme="dark"] .btn {
  background: var(--ink);
  color: var(--bg);
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] header nav a.nav-pricing:hover,
html[data-theme="dark"] .feature.feature-cta .cta-link:hover {
  background: oklch(84% 0.008 264);
}
html[data-theme="dark"] .btn-primary svg {
  fill: var(--bg);
}

/* Subpages style buttons inline; catch them by their inline-style signature.
   Inline styles beat any selector, hence !important. */
html[data-theme="dark"] [style*="background:var(--ink)"],
html[data-theme="dark"] [style*="background: var(--ink)"] {
  color: var(--bg) !important;
}
html[data-theme="dark"] [style*="fill:#fff"],
html[data-theme="dark"] [style*="fill: #fff"] {
  fill: var(--bg) !important;
}

/* --- Homepage sections with hardcoded colors --- */
html[data-theme="dark"] .trust-band {
  background: oklch(14% 0.01 264);
  border-top: 1px solid oklch(26% 0.008 264);
  border-bottom: 1px solid oklch(26% 0.008 264);
}
html[data-theme="dark"] .trust-band p { color: oklch(78% 0.008 264); }
html[data-theme="dark"] .sticky-cta {
  background: oklch(20% 0.008 264 / 0.96);
  box-shadow: 0 -4px 24px oklch(0% 0 0 / 0.5);
}
html[data-theme="dark"] .mobile-link-email { border-color: oklch(34% 0.06 267); }
html[data-theme="dark"] .showcase-img img { box-shadow: 0 8px 32px oklch(0% 0 0 / 0.5); }

/* --- Theme toggle button (identical markup on every page) --- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.theme-toggle:hover { border-color: var(--ink-3); color: var(--ink); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-moon { fill: currentColor; }
.theme-toggle .icon-sun { display: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* --- Download interstitials (hardcoded palette, no token block) ---
   Their <html> carries class="interstitial" so this can't leak onto
   token-based content pages. */
html.interstitial[data-theme="dark"] body {
  background: #1a1917;
  color: #e6e5e2;
}
html.interstitial[data-theme="dark"] body a { color: #91a7ff; }