/* ==========================================================
   balance. — DESIGN TOKENS
   Clinical Dusk palette. Bolder than the spec.
   ========================================================== */

:root {
  /* ---- PALETTE: CLINICAL DUSK (default) ---- */
  --bg:         #F4EFE6;   /* warm ivory, primary canvas */
  --bg-paper:   #FAF6ED;   /* elevated surface */
  --bg-clay:    #E3D9C9;   /* warm clay card */
  --bg-fog:     #EAE3D5;   /* subtle section divider fill */

  --ink:        #0F1310;   /* primary text, near-black warm */
  --ink-70:     #3B403B;
  --ink-50:     #60655F;   /* a11y: 5.2:1 on --bg, 5.5:1 on --bg-paper (was #6F746E at 4.17 — failed AA) */
  --ink-30:     #A8ACA5;
  --ink-15:     #D3D1C8;

  --forest:     #0F2A1E;   /* inverse surface, deep bottle */
  --forest-deep:#081A12;
  --chart:      #C8D66B;   /* SIGNATURE accent — moss chartreuse */
  --chart-deep: #A8B84D;   /* FILLS AND BORDERS ONLY — 1.90:1 on --bg */

  /* Accent color for TEXT. Same hue (69°) and saturation as --chart-deep,
     darkened until it clears AA: 5.40:1 on --bg, 5.73:1 on --bg-paper,
     4.84:1 on --bg-fog. --chart-deep fails at 1.90:1 and must never be used
     for type on a light surface — that is what made half the hero headline
     unreadable. Redefined per palette below. */
  --chart-text: #5D6629;
  --clay-warm:  #D9C7A8;
  --terra:      #D96A4A;   /* scalpel accent, rare use */
  --sage:       #8B9D83;

  /* Focus indicator. Deliberately NOT --chart-deep: chartreuse on cream is
     1.90:1, which fails WCAG 1.4.11 (3:1 for non-text). --forest resolves per
     palette (13.38:1 on dusk, chartreuse-on-near-black on midnight) so this
     one token stays compliant in all three. */
  --focus-ring: var(--forest);

  /* Hairline rule on the inverted (surface-ink) footer. Derived from the
     palette so it follows a theme switch, unlike the #2a2a27 it replaced. */
  --rule-on-ink: color-mix(in srgb, var(--bg) 14%, var(--ink));

  /* ---- TYPE ---- */
  --font-display: 'Source Serif 4', Georgia, serif;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- SPACING ---- */
  --s-1: 4px;  --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;
  --s-24: 96px; --s-32: 128px;

  /* ---- RADII ---- */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 9999px;

  /* ---- MOTION ---- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-slow: 600ms;

  /* ---- CONTAINER ---- */
  --maxw: 1360px;
  --pad: clamp(20px, 4vw, 48px);
}

/* ---- ALT PALETTE: MIDNIGHT CLINIC (Tweaks toggle) ---- */
html[data-palette="midnight"] {
  --bg:         #0E0F0D;
  --bg-paper:   #171814;
  --bg-clay:    #24251E;
  --bg-fog:     #1E1F1A;
  --ink:        #F1EDE1;
  --ink-70:     #C5C1B5;
  --ink-50:     #8F8C80;
  --ink-30:     #5A5850;
  --ink-15:     #2E2E28;
  --forest:     #C8D66B;     /* invert: chartreuse surface */
  --forest-deep:#A8B84D;
  --chart:      #D9E88A;
  --chart-deep: #C8D66B;
  --chart-text: #C8D66B;   /* 12.16:1 on midnight --bg */
  --clay-warm:  #3A382E;
  --terra:      #E88562;
}

/* ---- ALT PALETTE: BONE (original spec direction) ---- */
html[data-palette="bone"] {
  --bg:         #F7F5F0;
  --bg-paper:   #FDFCF9;
  --bg-clay:    #E8DFD0;
  --bg-fog:     #EDEAE3;
  --ink:        #0A0A0A;
  --ink-70:     #3A3A38;
  --ink-50:     #6B6B67;
  --ink-30:     #A8A7A0;
  --ink-15:     #D8D6D0;
  --forest:     #1F4435;
  --forest-deep:#163128;
  --chart:      #1F4435;       /* forest is primary accent */
  --chart-deep: #163128;
  --chart-text: #163128;       /* 12.81:1 on bone --bg */
  --clay-warm:  #E8DFD0;
  --terra:      #C85A3C;
  --sage:       #8B9D83;
}

/* ---- PAGE PALETTE: EMBER CINEMATIC ----
   Sanctioned only for the scroll-driven how-it-works stage. This formalizes
   its intentionally warmer art direction without making page-local colors.
   --chart-deep remains the graphic accent; --chart-text is the same ember hue
   darkened for text (5.09:1 on --bg, 4.53:1 on clay). */
html[data-palette="ember"] {
  --bg:         #EFE9DC;
  --bg-paper:   #FFFFFF;
  --bg-clay:    #E6DCC9;
  --bg-fog:     #F4EAD7;
  --ink:        #1A1A1A;
  --ink-70:     rgba(26, 26, 26, 0.70);
  --ink-50:     rgba(26, 26, 26, 0.50);
  --ink-30:     rgba(26, 26, 26, 0.30);
  --ink-15:     rgba(26, 26, 26, 0.15);
  --forest:     #1E3A2B;
  --forest-deep:#13271D;
  --chart:      #EA8B3A;
  --chart-deep: #C86A1A;
  --chart-text: #9B4B12;
  --focus-ring: var(--chart-text);

  /* Cinematic-stage utility colors; not shared component tokens. */
  --hiw-white:  #FFFFFF;
  --hiw-status: #16A34A;
  --hiw-rx-paper: #F4EAD7;
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'ss02', 'cv11';
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

/* ==========================================================
   TYPOGRAPHY
   ========================================================== */
/* The display serif carries an optical-size axis that controls stroke
   contrast: low values are sturdy and open for text, high values are delicate
   and high-contrast for display. (Source Serif 4's axis runs opsz 8–60;
   Fraunces, the previous display face, ran 9–144 — the principle below
   held for both and survives any future serif swap.)
   These rules used to pin `font-variation-settings: "opsz" 144`, which forced
   the *display* extreme at every size — so a 42px mobile h1 rendered in
   hairlines built for 144px. Combined with weight 300 and -0.04em tracking it
   was the reported "hard to read" headline.
   `font-optical-sizing: auto` is what the axis is for: the browser tracks opsz
   to the actual rendered size. Never re-pin opsz here. */
.display-xl, h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-optical-sizing: auto;
}
h2, .display-lg {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-optical-sizing: auto;
}
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
h4 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

/* ----------------------------------------------------------
   DISPLAY TYPE SCALE
   Use these classes for serif display type that is NOT a semantic
   heading (card titles, pull quotes, stat figures, nav items).
   They exist because ~89 places hand-rolled fontFamily/fontSize/
   fontWeight inline, which is how the h1 legibility bug spread.

   Do not set font-variation-settings: "opsz" on any of them —
   optical sizing must stay automatic. Below ~24px prefer
   --font-ui; the display serif at small sizes and light weights
   is where legibility falls apart.
   ---------------------------------------------------------- */
/* .t-display sized to the site's de-facto section opener (14 h2s used this
   exact clamp inline before the scale existed — unified 2026-07-28) */
.t-display { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3.5vw, 3.25rem); line-height: 1.05; letter-spacing: -0.025em; font-optical-sizing: auto; }
.t-title   { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.12; letter-spacing: -0.02em;  font-optical-sizing: auto; }
.t-heading { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 2vw, 1.5rem);line-height: 1.18; letter-spacing: -0.015em; font-optical-sizing: auto; }
.t-subhead { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem;                   line-height: 1.25; letter-spacing: -0.01em;  font-optical-sizing: auto; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.mono { font-family: var(--font-mono); font-feature-settings: "ss01"; }
.serif { font-family: var(--font-display); }

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.45;
  color: var(--ink-70);
  max-width: 48ch;
}
.body { color: var(--ink-70); line-height: 1.6; }

/* ==========================================================
   LAYOUT
   ========================================================== */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--pad);
}
.section { padding-block: clamp(64px, 10vw, 144px); }
.section-sm { padding-block: clamp(48px, 6vw, 80px); }

.surface-paper { background: var(--bg-paper); color: var(--ink); }
.surface-clay { background: var(--bg-clay); color: var(--ink); }
.surface-forest {
  background: var(--forest);
  color: var(--bg);
}
.surface-forest h1, .surface-forest h2, .surface-forest h3, .surface-forest h4 { color: var(--bg); }
.surface-forest .eyebrow { color: var(--chart); }
.surface-forest .body { color: var(--bg); opacity: 0.75; }
.surface-ink {
  background: var(--ink);
  color: var(--bg);
}
.surface-ink h1, .surface-ink h2, .surface-ink h3 { color: var(--bg); }
.surface-ink .eyebrow { color: var(--chart); }
.surface-chart {
  background: var(--chart);
  color: var(--forest);
}
.surface-chart h1, .surface-chart h2, .surface-chart h3 { color: var(--forest); }

.divider { height: 1px; background: var(--ink-15); border: none; }

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn--primary {
  background: var(--ink);
  color: var(--bg);
}
.btn--primary:hover { background: var(--forest); transform: translateY(-1px); }

.btn--chart {
  background: var(--chart);
  color: var(--forest);
  font-weight: 600;
}
.btn--chart:hover { background: var(--chart-deep); transform: translateY(-1px); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink-30);
}
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }

.btn--forest-inv {
  background: var(--bg);
  color: var(--ink);
}
.btn--forest-inv:hover { background: var(--chart); color: var(--forest); }

.btn--ghost-inv {
  background: transparent;
  color: var(--bg);
  border-color: var(--bg);
  opacity: 0.9;
}
.btn--ghost-inv:hover { background: var(--bg); color: var(--ink); opacity: 1; }

.btn--sm { padding: 9px 16px; font-size: 13px; }
.btn--lg { padding: 18px 28px; font-size: 15px; }

.btn .arrow { font-family: var(--font-display); font-weight: 300; font-size: 1.2em; line-height: 0; }

/* ==========================================================
   TAG / BADGE
   ========================================================== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-fog);
  color: var(--ink-70);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}
.tag--chart { background: var(--chart); color: var(--forest); }
.tag--forest { background: var(--forest); color: var(--chart); }
.tag--live::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--terra);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* ==========================================================
   INPUTS
   ========================================================== */
.input, .select, .textarea {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--ink-30);
  border-radius: var(--r-sm);
  background: var(--bg-paper);
  font-family: var(--font-ui);
  font-size: 16px; /* 16px: prevents iOS zoom-on-focus */
  color: var(--ink);
  transition: border var(--t-fast), box-shadow var(--t-fast);
}
.textarea { height: auto; padding: 14px 16px; min-height: 120px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chart) 40%, transparent);
}
.input::placeholder { color: var(--ink-30); }

/* ==========================================================
   LOGO WORDMARK — "balance." (lowercase heavy sans)
   Matches the real brand logo: Inter 800 w/ trailing period.
   ========================================================== */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.045em;
  color: var(--ink);
  line-height: 1;
}
.wordmark__dot {
  color: var(--chart);
  margin-left: 1px;
}
.surface-forest .wordmark,
.surface-ink .wordmark { color: var(--bg); }
.surface-forest .wordmark__dot,
.surface-ink .wordmark__dot { color: var(--chart); }

/* ==========================================================
   UTILITIES
   ========================================================== */
.flex { display: flex; }
.grid { display: grid; }
.stack > * + * { margin-top: var(--gap, 1rem); }
.center { text-align: center; }
.muted { color: var(--ink-50); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* Scrollbar in dark forest surface */
::selection { background: var(--chart); color: var(--forest); }

/* ==========================================================
   ANIMATIONS
   ========================================================== */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fade-up 0.8s var(--ease-out) both; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================
   PRODUCT PLACEHOLDER TILE
   Honest, typographic stand-in for medications where we don't
   have real product photography yet. Never print fabricated
   ingredient labels on a generated vial image.
   ========================================================== */
.rx-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(14px, 2.2vw, 28px);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 80% at 0% 0%, var(--bg-paper) 0%, var(--bg-clay) 70%);
  border: 1px solid var(--ink-15);
  overflow: hidden;
  isolation: isolate;
}
.rx-placeholder--forest {
  background: radial-gradient(120% 80% at 100% 100%, var(--forest-deep) 0%, var(--forest) 70%);
  color: var(--bg);
  border-color: transparent;
}
.rx-placeholder--forest .rx-placeholder__meta,
.rx-placeholder--forest .rx-placeholder__rx { color: var(--chart); }
.rx-placeholder--chart {
  background: radial-gradient(120% 80% at 100% 0%, var(--chart) 0%, var(--chart-deep) 90%);
  color: var(--forest-deep);
  border-color: transparent;
}
.rx-placeholder__top,
.rx-placeholder__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  z-index: 2;
}
.rx-placeholder__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.rx-placeholder__rx {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
  opacity: 0.85;
}
.rx-placeholder__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.8vw, 1.65rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 10px 0;
  z-index: 2;
  word-break: break-word;
}
.rx-placeholder__class {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.75;
}
/* Abstract molecule schematic — 3 nodes + connectors, pure CSS */
.rx-placeholder__glyph {
  position: absolute;
  right: -12%;
  top: 50%;
  transform: translateY(-50%);
  width: 70%;
  aspect-ratio: 1;
  opacity: 0.22;
  pointer-events: none;
  z-index: 1;
}
.rx-placeholder--forest .rx-placeholder__glyph { opacity: 0.28; }
.rx-placeholder--chart  .rx-placeholder__glyph { opacity: 0.35; }
.rx-placeholder__glyph svg { width: 100%; height: 100%; }