/* =========================================
   Theme layer — loaded LAST on every page.
   1. Theme toggle (layout + look, both themes)
   2. Dark palette: semantic tokens + remaps of the shared tokens
   3. Hand-tuned dark polish for shared components
   Page-level dark rules are GENERATED into css/dark/<page>.css
   (tools/build-dark.py); this file only holds what needs a human eye.
   ========================================= */

/* ---------- 1. Theme toggle ---------- */
.theme-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line-med, rgba(43, 111, 145, .2));
  background: transparent;
  color: var(--ink-800, #1f1f1f);
  cursor: pointer;
  transition: background-color .18s var(--ease-standard, ease), border-color .18s, color .18s, transform .18s;
}
.theme-toggle svg { width: 20px; height: 20px; display: block; }
.theme-toggle__icon { display: grid; place-items: center; transition: transform .35s var(--ease-soft, ease), opacity .25s; }
.theme-toggle__icon--sun { display: none; }
html[data-theme="dark"] .theme-toggle__icon--sun { display: grid; }
html[data-theme="dark"] .theme-toggle__icon--moon { display: none; }
.theme-toggle:focus-visible { outline: 3px solid var(--blue, #398fba); outline-offset: 3px; }
@media (hover: hover) {
  .theme-toggle:hover { background: rgba(57, 143, 186, .12); border-color: var(--blue, #398fba); }
  .theme-toggle:hover .theme-toggle__icon { transform: rotate(18deg); }
}
/* header grid: desktop gets a 4th column, mobile gets its own area next to the hamburger */
.header.hnav { grid-template-columns: auto 1fr auto auto; }
.header.hnav .theme-toggle { justify-self: end; }
@media (max-width: 768px) {
  .header.hnav { grid-template-columns: auto 1fr auto auto; grid-template-areas: "logo . toggle hamburger"; }
  .header.hnav .theme-toggle { grid-area: toggle; }
}
@media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-toggle__icon { transition: none; } }

/* smooth, short cross-fade only at the moment of switching */
html.theme-anim body, html.theme-anim body *:not(img):not(svg):not(video) {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}
@media (prefers-reduced-motion: reduce) { html.theme-anim body, html.theme-anim body * { transition: none !important; } }

/* ---------- 2. Dark palette ---------- */
html[data-theme="dark"] {
  color-scheme: dark;

  /* semantic roles */
  --bg-primary: #0b1620;
  --bg-secondary: #0f1d29;
  --surface: #14232f;
  --surface-elevated: #1a2c3a;
  --text-primary: #eef3f6;
  --text-secondary: #b4c2cc;
  --border: rgba(255, 255, 255, 0.12);
  --accent-primary: #8fcdee;
  --accent-secondary: #ff8a82;

  /* shared tokens (tokens.css / Samaneh.css) remapped */
  --surface-soft: #101e2a;
  --surface-sunken: #0d1923;
  --ink-900: #eef3f6;
  --ink-800: #dfe7ec;
  --ink-700: #c4d0d8;
  --ink-600: #b4c2cc;
  --ink-500: #93a4b0;
  --line-soft: rgba(255, 255, 255, 0.11);
  --line-med: rgba(143, 205, 238, 0.28);
  --blue-deep: #8fcdee;          /* text/icon use; fills use --brand-fill */
  --brand-fill: #2b6f91;
  --blue-darker: #235a75;
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.55);
  --shadow-blue: 0 10px 24px rgba(0, 0, 0, 0.4);
  --shadow-coral: 0 12px 26px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] body {
  background: var(--bg-primary);
  color: var(--text-primary);
}
html[data-theme="dark"] ::selection { background: rgba(143, 205, 238, .35); color: #fff; }
html[data-theme="dark"] a { color: inherit; }
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { color-scheme: dark; }
html[data-theme="dark"] ::placeholder { color: var(--ink-500); opacity: 1; }

/* ---------- 3. Component polish ---------- */
/* buttons (css/buttons.css) */
html[data-theme="dark"] .btn--secondary,
html[data-theme="dark"] .btn--light,
html[data-theme="dark"] .btn--ghost,
html[data-theme="dark"] .hero-btn-secondary,
html[data-theme="dark"] .action-link--secondary,
html[data-theme="dark"] .ftx-btn--secondary,
html[data-theme="dark"] .cta-btn--secondary,
html[data-theme="dark"] .ccta-btn--secondary,
html[data-theme="dark"] #marketing .marketing-cta {
  background: transparent;
  color: var(--blue-deep);
  border-color: var(--blue-deep);
}
@media (hover: hover) {
  html[data-theme="dark"] .btn--secondary:hover,
  html[data-theme="dark"] .btn--light:hover,
  html[data-theme="dark"] .btn--ghost:hover,
  html[data-theme="dark"] .hero-btn-secondary:hover,
  html[data-theme="dark"] .action-link--secondary:hover,
  html[data-theme="dark"] .ftx-btn--secondary:hover,
  html[data-theme="dark"] .cta-btn--secondary:hover,
  html[data-theme="dark"] .ccta-btn--secondary:hover,
  html[data-theme="dark"] #marketing .marketing-cta:hover {
    background: rgba(143, 205, 238, 0.12);
    color: #fff;
    border-color: var(--blue-deep);
  }
}

/* header + nav */
html[data-theme="dark"] .header.hnav { background: rgba(11, 22, 32, 0.86); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05); }
html[data-theme="dark"] .header.hnav.scrolled { background: rgba(11, 22, 32, 0.97); box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.7); }
html[data-theme="dark"] img[src$="img/logo.svg"] { filter: invert(1) hue-rotate(180deg) brightness(1.15); }   /* black wordmark -> light, keeps hue (header + footer) */
html[data-theme="dark"] .hamburger span { background: var(--ink-800); }

/* floating page navigator */
html[data-theme="dark"] .csn__btn { background: rgba(20, 35, 47, 0.94); border-color: rgba(143, 205, 238, .28); color: var(--ink-900); }
html[data-theme="dark"] .csn__panel { background: var(--surface-elevated); border-color: var(--line-soft); }
html[data-theme="dark"] .csn__link { color: var(--ink-700); }
html[data-theme="dark"] .csn__link.is-active { background: rgba(143, 205, 238, .14); color: #fff; }
html[data-theme="dark"] .csn__icon { background: var(--brand-fill); color: #fff; }
@media (hover: hover) {
  html[data-theme="dark"] .csn__link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
  html[data-theme="dark"] .csn__link.is-active:hover { background: rgba(143, 205, 238, .2); color: #fff; }
}

/* contact card */
html[data-theme="dark"] .ccta__card { background: var(--surface); }
html[data-theme="dark"] .ccta--about .ccta__card, html[data-theme="dark"] .ccta--resume .ccta__card { background: var(--surface); }
html[data-theme="dark"] .ccta__panel { background: var(--surface-elevated); border-color: var(--line-soft); }
html[data-theme="dark"] .ccta__tile { background: var(--bg-secondary); border-color: var(--line-soft); color: var(--blue-deep); }
html[data-theme="dark"] .ccta__compose { background: var(--bg-secondary); border-color: var(--line-soft); }
html[data-theme="dark"] .ccta__compose:focus-within { background: var(--surface); border-color: var(--blue); box-shadow: 0 0 0 3px rgba(143, 205, 238, .22); }
html[data-theme="dark"] .ccta__error { color: #ff9b94; }
html[data-theme="dark"] .ccta__copy.is-done, html[data-theme="dark"] .ccta__copy:hover { background: var(--brand-fill); color: #fff; }

/* skills band + toolkit tiles */
html[data-theme="dark"] .sk-showcase__card { background: #123246; }
html[data-theme="dark"] .tk-tile { background: var(--bg-secondary); }
html[data-theme="dark"] .tk-tile__icon { background: var(--surface); }

/* case-study extras */
html[data-theme="dark"] .cs-summary__card { background: var(--surface); }
html[data-theme="dark"] .cs-pn__card { background: var(--surface); }
html[data-theme="dark"] .cs-pn__fig { background: #fff; }   /* thumbnails are light artwork: keep them readable */

/* resume print rules live in css/resume.css; screens only here */

/* calmer bands: the light theme's translucent coral→blue wash turns muddy on navy */
html[data-theme="dark"] .split-band,
html[data-theme="dark"] .skills-section { background: var(--bg-secondary); }
html[data-theme="dark"] .sk-pill--l { background: #fff; color: #0e2330; }

/* GL Medical: green text tones lightened for dark; --green-solid keeps the dark-green fills */
html[data-theme="dark"] {
  --green-500: #46d1a0;
  --green-700: #62d9ae;
  --green-800: #86e8c7;
  --green-900: #b5f2dc;
}

/* Crossroads: sage text tones lightened for dark; --xr-solid-* keep the dark-sage fills */
html[data-theme="dark"] {
  --xr-900: #e6eedf;
  --xr-800: #d3dfc8;
  --xr-700: #b9ccaa;
  --xr-500: #a3bd8f;
  --xr-charcoal: #e8ebee;
  --xr-mid-gray: #adb4ba;
}

/* text-only brand-dark variables (never used as fills) lightened for dark */
html[data-theme="dark"] {
  --qr-blue: #7fc2e3;
  --id-blue-dark: #7fc2e3;
  --pf-blue-700: #7fc2e3;
}
html[data-theme="dark"] .sk-pill--a { color: #0e2330; }

/* ---- Lumeve (hand-tuned: accent surfaces + icons) ---- */
/* persona card keeps its gold gradient, so it keeps dark text */
html[data-theme="dark"][data-page="lumeve"] #persona .persona-profile {
  background: linear-gradient(180deg, #fbe6b6 0%, #f7cf74 65%, #f2b134 100%);
  border-color: rgba(255, 255, 255, 0.18);
  color: #1f232b;
}
html[data-theme="dark"][data-page="lumeve"] #persona .profile-name,
html[data-theme="dark"][data-page="lumeve"] #persona .profile-facts,
html[data-theme="dark"][data-page="lumeve"] #persona .profile-facts li { color: #1f232b; }
html[data-theme="dark"][data-page="lumeve"] #persona .profile-facts li strong { color: #0d1320; }
/* step icons are fixed-colour SVG <img>s: make them clearly visible on the dark badge */
html[data-theme="dark"] .digit-badge img { filter: brightness(0) invert(1); opacity: .92; }

/* button labels keep the button's own colour (generated text rules must not tint them) */
html[data-theme="dark"] .btn--primary span,
html[data-theme="dark"] .hero-btn-primary span,
html[data-theme="dark"] .ftx-btn--primary span,
html[data-theme="dark"] .cta-btn--primary span,
html[data-theme="dark"] .ccta-btn--primary span,
html[data-theme="dark"] .action-link--primary .label { color: #fff; }

/* text that sits on gold / coral / pink ACCENT surfaces stays dark */
html[data-theme="dark"] .em-badge,
html[data-theme="dark"] .cta-note { color: #1f232b; }
html[data-theme="dark"][data-page="patientsFirst"] .pf-hero h1,
html[data-theme="dark"][data-page="patientsFirst"] .pf-hero__lede { color: #1f1f1f; }

/* transparent artwork authored for a light page keeps a light panel behind it */
html[data-theme="dark"] .wireframe-img,
html[data-theme="dark"] .zoom-img { background-color: #f5f5f5; }
html[data-theme="dark"] .cta-note { color: #1f232b !important; }