/* Dark mode for the public pages. Loaded after styles.css; light mode is styles.css as is.
   The theme is set on <html data-theme> by assets/theme.js. */
.theme-toggle {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; cursor: pointer;
  border: 2px solid var(--line); background: transparent; color: var(--ink);
}
.theme-toggle:hover { border-color: var(--blue); color: var(--blue-text); }

[data-theme="dark"] {
  color-scheme: dark;
  --blue-text: #8ab4ff;
  --ink: #e8edfa;
  --ink-2: #aab5d0;
  --bg: #0d1530;
  --line: #24305a;
  --tint: #131d3f;
  --surface: #172248;
  --shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
[data-theme="dark"] body { background: var(--bg); }
[data-theme="dark"] a:where(:not(.btn):not(.logo)) { color: #8ab4ff; }
[data-theme="dark"] .footer a { color: #e6edf9; }
[data-theme="dark"] .top,
[data-theme="dark"] .drawer { background: #101a3a; border-color: var(--line); }
[data-theme="dark"] .logo { color: #fff; }
[data-theme="dark"] .menu a { color: var(--ink); }
[data-theme="dark"] .menu a:hover { background: var(--tint); color: #8ab4ff; }
[data-theme="dark"] .drawer a { color: var(--ink); }
[data-theme="dark"] .lang select,
[data-theme="dark"] input,
[data-theme="dark"] select { background: var(--surface); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus { box-shadow: 0 0 0 3px rgba(47, 111, 224, .4); }
[data-theme="dark"] .btn--line { background: transparent; color: #8ab4ff; border-color: #34437a; box-shadow: 0 4px 0 #34437a; }
[data-theme="dark"] .chip { background: var(--surface); border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .chip.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
[data-theme="dark"] .tab { border-color: var(--bg); color: #12224a; }
[data-theme="dark"] .tab[aria-selected="true"] { border-color: #8ab4ff; }
[data-theme="dark"] .vcard__title { color: var(--ink); }
[data-theme="dark"] .pill { background: rgba(76, 182, 138, .18); color: #7fdcb2; }
[data-theme="dark"] .checks li,
[data-theme="dark"] .person,
[data-theme="dark"] .pillar,
[data-theme="dark"] .panel,
[data-theme="dark"] .who__btn,
[data-theme="dark"] .pics button,
[data-theme="dark"] .x { background: var(--surface); border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .who__btn--kid { background: #2b2a4a; }
[data-theme="dark"] .skills li { background: linear-gradient(180deg, #1d2a57, #172248); color: var(--ink); }
[data-theme="dark"] .mission { background: linear-gradient(180deg, #172248, #131d3f); border-color: var(--line); }
[data-theme="dark"] .person__img { background: radial-gradient(circle at 40% 35%, #2a3a72, #172248); }
[data-theme="dark"] .notice { background: #3a3317; color: #ffe8a3; }
[data-theme="dark"] .dots i { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .dots i.on { background: #3a3317; }
[data-theme="dark"] .row-item { background: var(--tint); }
[data-theme="dark"] .msg--ok { color: #7fdcb2; }
[data-theme="dark"] .footer { background: #08102a; }
[data-theme="dark"] .burger span,
[data-theme="dark"] .burger span::before,
[data-theme="dark"] .burger span::after { background: #8ab4ff; }
[data-theme="dark"] .burger[aria-expanded="true"] span { background: transparent; }
[data-theme="dark"] .skip:focus { background: var(--surface); }
[data-theme="dark"] .logo__word { color: #fff; }
[data-theme="dark"] .logo__word b { color: #6fe0a0; }
[data-theme="dark"] .trustbar { background: var(--bg); border-color: var(--line); }
[data-theme="dark"] .steps li,
[data-theme="dark"] .plan,
[data-theme="dark"] .found article,
[data-theme="dark"] .swatches li,
[data-theme="dark"] .brandsheet__light { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .brandsheet__light { background: #f6f8ff; }
[data-theme="dark"] .brandsheet__light figcaption { color: #4b5878; }
[data-theme="dark"] .plan--best { border-color: var(--green); }
[data-theme="dark"] .plan li::before { background: rgba(76, 182, 138, .2); color: #7fdcb2; }
[data-theme="dark"] .steps li::before { background: var(--tint); color: #8ab4ff; }
[data-theme="dark"] .section--tint { background: var(--tint); }
[data-theme="dark"] .iconsheet figure { background: var(--surface); }
[data-theme="dark"] .pill--purple { background: rgba(138, 92, 245, .2); color: #c9b3ff; }
[data-theme="dark"] .vcard__num { color: #8ab4ff; }
[data-theme="dark"] .wl { background: var(--bg); color: var(--ink); }

/* Contrast on dark backgrounds (WCAG 1.4.3) */
[data-theme="dark"] .rv-hero h1,
[data-theme="dark"] .rv-h2 { color: var(--ink); }
[data-theme="dark"] .wd-skill,
[data-theme="dark"] .wd-skillbar b { color: #ff8cc8; }
[data-theme="dark"] .brandsheet__light a { color: var(--blue-dark); }