/* WIA SOOM site theme — dark values + header theme menu (2026-10-14).
   Load AFTER light-kit.css and the page's own <style> (end of <head>). Light stays exactly as before: every rule
   below except the theme menu is scoped to :root[data-theme="dark"], which components/site-theme.js sets before
   first paint. Text on accent/ink "solid" fills is handled separately because --accent and --ink are text colors in
   dark (light purple / near-white) — a button keeps a deep purple fill with white text (7.1:1). */

/* ===== theme menu (both themes) ===== */
.lk-theme-wrap { position: relative; display: inline-flex; }
.lk-theme {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  background: transparent; border: 1px solid var(--line); color: var(--ink-2); border-radius: 999px; cursor: pointer;
}
.lk-theme:hover { color: var(--ink); border-color: var(--line-strong, #cbd0e0); }
.lk-theme svg { width: 18px; height: 18px; }
.lk-theme .ic-sun, .lk-theme .ic-moon { display: none; }
.lk-theme[data-eff="light"] .ic-sun, .lk-theme:not([data-eff]) .ic-sun { display: block; }
.lk-theme[data-eff="dark"] .ic-moon { display: block; }
.lk-theme-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 10003; min-width: 168px;
  background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 12px; padding: 6px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .14);
}
.lk-theme-menu[hidden] { display: none; }
.lk-theme-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); font-size: .92rem; font-weight: 600; cursor: pointer; text-align: start;
}
.lk-theme-menu button:hover, .lk-theme-menu button:focus-visible { background: var(--hover, rgba(15, 23, 42, .05)); }
.lk-theme-menu button::after { content: ''; margin-inline-start: auto; width: 16px; text-align: center; color: var(--accent); }
.lk-theme-menu button[aria-checked="true"]::after { content: '✓'; }
.lk-mobile-actions .lk-theme-menu { top: auto; bottom: calc(100% + 8px); inset-inline-end: auto; inset-inline-start: 0; }
/* logo: theme copies at 2x (324×96) instead of the 366KB original */
.lk-logo .logo-dark { display: none; }
:root[data-theme="dark"] .lk-logo .logo-light { display: none; }
:root[data-theme="dark"] .lk-logo .logo-dark { display: block; }

/* ===== dark tokens ===== */
:root[data-theme="dark"] {
  --bg: #0b0b12;
  --bg-soft: #12131c;
  --bg-tint: #1a1630;
  --surface: #14151f;
  --ink: #eceef5;
  --ink-2: #c5cad8;
  --muted: #a3abbd;
  --line: #2a2d3d;
  --line-strong: #454a60;
  --accent: #c4b1ff;
  --accent-2: #a78bfa;
  --accent-soft: #2a2145;
  --ok: #4ade80;
  --hover: rgba(255, 255, 255, .07);
  --fill: #6d28d9;          /* purple fill behind white text */
  --fill-hover: #7c3aed;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
:root[data-theme="dark"] body { background: var(--bg); color: var(--ink); }

/* ===== light-kit shell ===== */
:root[data-theme="dark"] .lk-header { background: rgba(11, 11, 18, .82); border-bottom-color: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .lk-nav a:hover { background: var(--hover); }
:root[data-theme="dark"] .lk-lang:hover { border-color: var(--line-strong); }
:root[data-theme="dark"] .lk-login,
:root[data-theme="dark"] .lk-skip,
:root[data-theme="dark"] .lk-toast { background: var(--ink); color: #0b0b12; }
:root[data-theme="dark"] .lk-login:hover { background: #ffffff; }
:root[data-theme="dark"] .lk-mobile { background: var(--surface); box-shadow: 0 16px 32px rgba(0, 0, 0, .45); }
:root[data-theme="dark"] .lk-mobile a { border-bottom-color: var(--line); }
:root[data-theme="dark"] .lk-btn-primary { background: var(--fill); color: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .lk-btn-primary:hover { background: var(--fill-hover); }
:root[data-theme="dark"] .lk-btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .lk-btn-ghost:hover { border-color: var(--line-strong); }
:root[data-theme="dark"] .lk-theme-menu { box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }

/* ===== home (/) ===== */
:root[data-theme="dark"] .hero {
  background:
    radial-gradient(60% 50% at 18% 18%, rgba(56, 120, 200, .22) 0%, rgba(56, 120, 200, 0) 70%),
    radial-gradient(50% 45% at 85% 12%, rgba(124, 58, 237, .25) 0%, rgba(124, 58, 237, 0) 70%),
    linear-gradient(180deg, #0e1220 0%, #100e1c 55%, #0b0b12 100%);
}
:root[data-theme="dark"] .org-steps li { background: rgba(20, 21, 31, .85); }
:root[data-theme="dark"] .win { background: var(--surface); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
:root[data-theme="dark"] .win-bar { background: #181926; border-bottom-color: var(--line); }
:root[data-theme="dark"] .win-dot { background: #33364a; }
:root[data-theme="dark"] .msg-who.me { background: #0c3550; color: #9fd8ff; }
:root[data-theme="dark"] .msg-text { background: #1b1c29; }
:root[data-theme="dark"] .msg-text.me { background: #11283b; }
:root[data-theme="dark"] .pill { background: var(--surface); }
:root[data-theme="dark"] .pill.go { background: var(--fill); border-color: var(--fill); color: #fff; }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .bub.ai,
:root[data-theme="dark"] .tl-resume,
:root[data-theme="dark"] .hello span,
:root[data-theme="dark"] .try-card,
:root[data-theme="dark"] .dl-card,
:root[data-theme="dark"] .comm-links a { background: var(--surface); }
:root[data-theme="dark"] .bub.me { background: #0c3550; color: #cfeaff; }
:root[data-theme="dark"] .try { background: linear-gradient(180deg, #0b0b12 0%, #0f1220 100%); }
:root[data-theme="dark"] .try-card-main { border-color: #4c3f8f; background: linear-gradient(180deg, #19162b 0%, #14151f 100%); }
:root[data-theme="dark"] .try-card:hover { border-color: #6a5bc0; }
:root[data-theme="dark"] .tools { background: #15110b; border-top-color: #3a2e1a; border-bottom-color: #3a2e1a; }
:root[data-theme="dark"] .tools .lk-eyebrow { color: #fbbf5e; }
:root[data-theme="dark"] .tool { background: #1b1710; border-color: #3a2e1a; }
:root[data-theme="dark"] .tool-ic { background: #33260f; color: #fbbf5e; }
:root[data-theme="dark"] .dl { background: linear-gradient(180deg, #100e1c 0%, #0b0b12 100%); }
:root[data-theme="dark"] .dl-card.mine { border-color: #6a5bc0; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
:root[data-theme="dark"] .comm-links a:hover { border-color: var(--line-strong); }

/* ===== pricing ===== */
:root[data-theme="dark"] .pricing-section { background: linear-gradient(180deg, #0e1220 0%, #100e1c 260px, #0b0b12 520px); }
:root[data-theme="dark"] .pricing-anchor-bar,
:root[data-theme="dark"] .pricing-card,
:root[data-theme="dark"] .enterprise-card,
:root[data-theme="dark"] .pricing-btn-outline,
:root[data-theme="dark"] .pricing-divider span { background: var(--surface); }
:root[data-theme="dark"] .pricing-anchor-old { color: #fca5a5; }
:root[data-theme="dark"] .pricing-card { box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
:root[data-theme="dark"] .pricing-card:hover,
:root[data-theme="dark"] .pricing-btn-outline:hover { border-color: var(--line-strong); }
:root[data-theme="dark"] .pricing-card.popular { box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
:root[data-theme="dark"] .badge-popular,
:root[data-theme="dark"] .pricing-btn-primary { background: var(--fill); color: #fff; }
:root[data-theme="dark"] .pricing-btn-primary:hover { background: var(--fill-hover); }
:root[data-theme="dark"] .badge-enterprise { background: var(--ink); color: #0b0b12; }
:root[data-theme="dark"] .pricing-divider span { color: #fbbf5e; }
:root[data-theme="dark"] .gift-section { background: #15110b; border-color: #3a2e1a; }
:root[data-theme="dark"] .gift-section select,
:root[data-theme="dark"] .gift-section input,
:root[data-theme="dark"] .gift-section textarea { color-scheme: dark; }

/* phones: like the language button, the header's theme button moves into the burger menu */
@media (max-width: 900px) {
  .lk-actions .lk-theme-wrap { display: none; }
}

/* pricing: colors written inline in the markup (style="color:#475569") — remap them in dark only */
:root[data-theme="dark"] main [style*="color:#475569"],
:root[data-theme="dark"] main [style*="color:#64748b"],
:root[data-theme="dark"] main [style*="color: #64748b"] { color: var(--muted) !important; }
:root[data-theme="dark"] main [style*="color:#0f172a"],
:root[data-theme="dark"] main [style*="color: #0f172a"] { color: var(--ink) !important; }
:root[data-theme="dark"] main [style*="color:#b45309"],
:root[data-theme="dark"] main [style*="color:#a16207"],
:root[data-theme="dark"] main [style*="color:#c2410c"] { color: #fbbf5e !important; }
:root[data-theme="dark"] main [style*="color:#0e7490"] { color: #67e8f9 !important; }
:root[data-theme="dark"] main [style*="color:#6d28d9"] { color: var(--accent) !important; }
:root[data-theme="dark"] main [style*="color:#7e22ce"] { color: #e0b3ff !important; }
:root[data-theme="dark"] main [style*="color:#15803d"] { color: var(--ok) !important; }
:root[data-theme="dark"] main [style*="color:#b91c1c"] { color: #fca5a5 !important; }
:root[data-theme="dark"] main [style*="background:rgba(15,23,42,0.05)"] { background: rgba(255, 255, 255, .07) !important; }
:root[data-theme="dark"] main [style*="background:#ffffff"] { background: var(--bg-soft) !important; color: var(--ink) !important; border-color: var(--line-strong) !important; }

/* both themes (fixes an existing miss): white on amber was 2.1–3.2:1 → deeper amber, white 5.0:1+ */
.badge-premium { background: linear-gradient(135deg, #b45309, #92400e) !important; }
.gift-section button[style*="#f59e0b"] { background: linear-gradient(135deg, #b45309, #92400e) !important; }

/* both themes (fixes an existing miss): in the burger menu ".lk-mobile a { color: var(--ink) }" beat .lk-login's white,
   so [Login] was dark text on a dark pill (1:1) on phones */
.lk-mobile .lk-login { display: inline-flex; color: #fff; border-bottom: 0; padding: 8px 16px; font-size: .9rem; }
:root[data-theme="dark"] .lk-mobile .lk-login { color: #0b0b12; }