/* Themes and the theme toggle, shared by every page.

   Dark is the default theme: the values under :root reproduce the site
   exactly as Taylor designed it, and each page's own :root keeps the
   original tokens (--bg, --cyan, --text, --glass ...). Light is the
   alternate, under html[data-theme="light"], which outranks :root
   wherever the two set the same token.

   ALL LIGHT VALUES ARE PLACEHOLDERS pending Taylor's sign-off.

   data-theme is set on <html> by the inline script at the top of every
   page's <head>, before any CSS, so the right theme paints first. The
   toggle (#themeToggle, in the header) is driven by /js/theme.js.

   Token kinds:
   - plain colors (--heading, --nav-link ...), used as var(--x)
   - channels (--cyan-rgb, --fg-rgb ...), used as rgba(var(--x-rgb), alpha)
     so every alpha in the page stylesheets stays exactly as written and
     a theme only swaps the color underneath
   - fills (--accent-fill-from/to ...): solid accent surfaces that carry
     dark text (buttons, icon discs), kept bright in both themes
   - media (--media-*): anything drawn on top of video, posters or photos
     (scrims, play buttons, captions, the video player and its lightbox).
     Never overridden: they stay dark in both themes.
   - strands and bottle: read by js/bg-canvas.js and js/hero.js. */

:root {
  /* Text */
  --heading: #f4f9fb;
  --nav-link: #e8eef2;
  --logo-text: #f4f8fa;
  --text-faint: #6c7a83;
  --text-note: #7c8994;
  --link-hover: #fff;
  --positive: #7fe0a8;
  --cyan-title: #40bde9;

  /* Channels */
  --bg-rgb: 6,10,16;
  --fg-rgb: 255,255,255;
  --cyan-rgb: 69,200,234;
  --cyan-bright-rgb: 127,224,247;
  --nsight-rgb: 123,199,192;
  --genie-rgb: 245,166,35;
  --shadow-rgb: 0,0,0;

  /* Fills and the text on them */
  --accent-fill-from: var(--cyan-bright);
  --accent-fill-to: var(--cyan);
  --nsight-fill-from: var(--nsight-teal-bright);
  --nsight-fill-to: var(--nsight-teal);
  --genie-fill-from: var(--genie-orange-bright);
  --genie-fill-to: var(--genie-orange);
  --on-accent: #04141c;
  --on-nsight: #04211e;
  --on-genie: #2b1400;

  /* Team modal */
  --modal-backdrop: rgba(4,7,12,0.82);
  --surface-modal: #0a121b;

  /* Media: the same in both themes */
  --media-rgb: 6,10,16;
  --media-white-rgb: 255,255,255;
  --media-shadow-rgb: 0,0,0;
  --media-black: #000;
  --media-white: #fff;
  --media-text: #eef5f9;
  --media-text-dim: #a9bac4;
  --media-heading: #f4f9fb;
  --media-cyan: #45c8ea;
  --media-cyan-bright: #7fe0f7;
  --media-cyan-rgb: 69,200,234;
  --media-glass-border: rgba(69,200,234,0.28);
  /* Dark tile behind partner logos in the light theme. */
  --logo-tile: #060a10;

  /* Background strands, js/bg-canvas.js */
  --strand-rgb: 64,214,235;
  --strand-core-rgb: 70,90,255;
  --strand-glow-rgb: 90,130,255;
  --strand-blend: lighter;
  --strand-alpha: 1;

  /* Bottle lighting, js/hero.js (its CONFIG holds the same dark values as
     fallbacks) */
  --bottle-rim: #bcd4ff;
  --bottle-rim-intensity: 2.4;
  --bottle-env-surround: 0.012;
  --bottle-exposure: 1;
}

/* ---------- Light theme: PLACEHOLDERS pending Taylor's sign-off ---------- */
html[data-theme="light"] {
  /* Page tokens from each page's :root */
  --bg: #f5f8fa;
  --bg2: #eaf0f4;
  --cyan: #0d789d;
  --cyan-bright: #0a6f93;
  --text: #0c1a24;
  --text-dim: #4a5d6a;
  --line: rgba(8,20,28,0.10);
  --glass: rgba(255,255,255,0.7);
  --glass-border: rgba(13,120,157,0.28);
  --nsight-teal: #2f8a82;
  --nsight-teal-bright: #23756e;
  --nsight-glass-border: rgba(47,138,130,0.32);
  --genie-orange: #c27a0e;
  --genie-orange-bright: #a1610a;
  --genie-glass-border: rgba(194,122,14,0.32);

  /* Text */
  --heading: #08141c;
  --nav-link: #13222c;
  --logo-text: #08141c;
  --text-faint: #5f6d76;
  --text-note: #5f6d76;
  --link-hover: #08141c;
  --positive: #1b7f4c;
  --cyan-title: #0c7aa1;

  /* Channels */
  --bg-rgb: 245,248,250;
  --fg-rgb: 8,20,28;
  --cyan-rgb: 13,120,157;
  --cyan-bright-rgb: 10,111,147;
  --nsight-rgb: 47,138,130;
  --genie-rgb: 194,122,14;
  --shadow-rgb: 16,38,54;

  /* Fills stay bright so their dark text keeps its contrast */
  --accent-fill-from: #7fe0f7;
  --accent-fill-to: #45c8ea;
  --nsight-fill-from: #a3ded8;
  --nsight-fill-to: #7bc7c0;
  --genie-fill-from: #ffc266;
  --genie-fill-to: #f5a623;

  /* Team modal */
  --modal-backdrop: rgba(15,25,35,0.55);
  --surface-modal: #ffffff;

  /* Additive blending only shows on a dark page; on light the strands
     are drawn normally, in darker colors. */
  --strand-rgb: 13,120,157;
  --strand-core-rgb: 40,60,200;
  --strand-glow-rgb: 60,90,220;
  --strand-blend: source-over;
  --strand-alpha: 1;

  --bottle-rim: #ffffff;
  --bottle-rim-intensity: 1.2;
  --bottle-env-surround: 0.35;
  --bottle-exposure: 1;
}

/* Logos in the light theme. Stopgaps until the dark-ink files listed in
   README.md arrive.
   - The RxHealing wordmark and the CEO signature are white on
     transparency. invert + hue-rotate(180deg) turns the white dark and
     keeps the blue mark blue.
   - Partner logos (genieMD, Nsight Health) are never recolored: they sit
     on a small dark tile instead. */
html[data-theme="light"] .logo-img,
html[data-theme="light"] .ceo-signature {
  filter: invert(1) hue-rotate(180deg);
}

html[data-theme="light"] .logo-panel img,
html[data-theme="light"] .partner-lockup img {
  box-sizing: content-box;
  background: var(--logo-tile);
}

html[data-theme="light"] .logo-panel img {
  width: calc(100% - 36px);
  padding: 14px 18px;
  border-radius: 12px;
}

html[data-theme="light"] .partner-lockup img {
  padding: 7px 10px;
  border-radius: 8px;
}

/* Light-theme fixes.
   - The hero heading's 60px cyan glow is clipped to the heading's box by
     .reveal-heading's overflow:hidden. On the dark page the box is 1/255
     off the background; on light it shows as a pale rectangle. */
html[data-theme="light"] .hero h1 {
  text-shadow: none;
}

/* ---------- Theme toggle ----------
   Sits in the header band, so nothing on the page is ever under it, and
   stays on screen for as long as the header does: the header is
   position:sticky, but see README.md, "Sticky header", for why it does not
   pin today. Absolutely positioned inside the header (its containing
   block): it takes no space, and the header lays out exactly as without
   it.
   - Up to 1160px (the hamburger range): 12px left of the hamburger.
   - 1161px to 1239px: in the header's left padding, before the logo. The
     full nav leaves only 5px beside the logo at 1161px (76px at 1240px),
     and right of Contact Us its magnetic hover moves the button up to
     16px; the left padding (5vw, 58px at 1161px) is the one place a 44px
     button fits next to nothing that moves.
   - 1240px and up: 16px left of the first nav link. /js/theme.js
     measures the nav into --rx-nav-w; 872px is its width with Poppins.
   The button is the 44px tap target; the visible 36px disc is drawn by
   ::before. The icon shows the current theme: moon in dark, sun in
   light. Hidden without JavaScript, where it could not work. */

.theme-toggle {
  position: absolute;
  top: 50%;
  right: calc(5vw + var(--rx-nav-w, 872px) + 16px);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--nav-link);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .2s ease;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 1161px) and (max-width: 1239px) {
  .theme-toggle {
    right: auto;
    left: calc(2.5vw - 22px);
  }
}

@media (max-width: 1160px) {
  .theme-toggle {
    right: calc(5vw + 34px + 12px);
  }
}

html:not([data-theme]) .theme-toggle {
  display: none;
}

.theme-toggle::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  transition: border-color .2s ease, background .2s ease;
}

.theme-toggle:hover {
  color: var(--cyan-bright);
}

.theme-toggle:hover::before {
  border-color: var(--cyan);
  background: rgba(var(--cyan-rgb),0.1);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--cyan-bright);
  outline-offset: 2px;
}

.theme-toggle svg {
  position: relative;
}

.theme-toggle .theme-toggle-moon,
html[data-theme="light"] .theme-toggle .theme-toggle-sun {
  display: block;
}

.theme-toggle .theme-toggle-sun,
html[data-theme="light"] .theme-toggle .theme-toggle-moon {
  display: none;
}

/* The theme itself switches instantly (js/theme.js); the toggle's own hover
   fade is the only motion. */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle::before {
    transition: none;
  }
}