/* ─────────────────────────────────────────────────────────────────────────────
 * Capillary — design tokens
 * Built on the Meditag visual spine (marine + Inter + soft shadows + 4pt grid),
 * shifted COOLER and more austere for a standards-body / public-institution feel:
 * near-white cool surfaces, marine as the structural anchor, terracotta reserved
 * as a sparing accent. Warm variant retained behind [data-palette="warm"].
 * ─────────────────────────────────────────────────────────────────────────── */

/* One variable font covers every weight the site uses (400/500/600). */
@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.ttf") format("truetype-variations"),
       url("../fonts/InterVariable.ttf") format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* ── Marine — primary structural anchor (from Meditag) ─────────────────── */
  --marine-900: #0B2138;
  --marine-800: #102B47;
  --marine-700: #1A4070;   /* primary */
  --marine-600: #2A5A8E;
  --marine-500: #3D74A8;
  --marine-300: #8FB0CC;
  --marine-200: #B6CCDF;
  --marine-100: #D9E4EF;
  --marine-50:  #EAF0F6;

  /* ── Terracotta — sparing accent ──────────────────────────────────────── */
  --terra-700: #9C4F33;
  --terra-500: #C66A4A;
  --terra-300: #DDA08A;
  --terra-200: #E9C5B7;
  --terra-100: #F2DBD0;
  --terra-50:  #F8EAE2;

  /* ── Sage — for the "fair / efficient" data series ────────────────────── */
  --sage-700: #2F5D4B;
  --sage-500: #5B8475;
  --sage-300: #9CBAAE;
  --sage-100: #DCE7E1;

  /* ── Cool neutrals (austere default) ──────────────────────────────────── */
  --cool-bg:      #F4F6F9;   /* page — cool near-white */
  --cool-bg-deep: #ECF0F4;   /* alternating band */
  --cool-paper:   #FBFCFD;   /* surface alt */
  --cool-white:   #FFFFFF;   /* cards */
  --ink-900:      #0E1A2B;   /* primary text — cool deep navy */
  --ink-800:      #1B2A3D;
  --ink-700:      #2C3A4D;   /* body */
  --ink-500:      #54637A;   /* muted (cooler than Meditag's) */
  --ink-400:      #7C8AA0;   /* faint / placeholder */
  --ink-200:      #CDD5DF;   /* dividers, hairlines */
  --ink-100:      #E3E8EF;   /* soft surfaces / chip bg */

  /* ── Warm neutrals (Meditag original — alt palette) ───────────────────── */
  --warm-bg:      #F7F4ED;
  --warm-bg-deep: #EFEBE0;
  --warm-paper:   #FBFAF6;

  /* ── Semantic tokens (default = cool) ─────────────────────────────────── */
  --bg:           var(--cool-bg);
  --bg-deep:      var(--cool-bg-deep);
  --surface:      var(--cool-white);
  --surface-alt:  var(--cool-paper);
  --surface-sunk: var(--ink-100);
  --fg:           var(--ink-900);
  --fg-body:      var(--ink-700);
  --fg-muted:     var(--ink-500);
  --fg-faint:     var(--ink-400);
  --border:       var(--ink-200);
  --border-soft:  var(--ink-100);

  --primary:       var(--marine-700);
  --primary-hover: var(--marine-800);
  --primary-soft:  var(--marine-50);
  --on-primary:    #FFFFFF;

  --success:  var(--sage-700);
  --accent:   var(--terra-500);  /* used sparingly */
  --accent-soft: var(--terra-50);
  --danger:   #8E3B2F;           /* brick — fake-print / out-of-stock, never alarming */
  --danger-soft: #F8E5E1;

  /* Accent intensity knob (tweakable) — scales how loud terracotta is */
  --accent-strength: 1;

  /* Motif (capillary lines) intensity (tweakable) — multiplies every network's opacity */
  --motif-scale: 1;
  --motif-stroke:  var(--marine-300);

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num:  "Inter", ui-sans-serif, system-ui, sans-serif;

  --fs-display: clamp(2.6rem, 5.2vw, 4.4rem);
  --fs-h1:      clamp(1.9rem, 3.6vw, 2.7rem);
  --fs-h2:      clamp(1.5rem, 2.6vw, 2.0rem);
  --fs-h3:      1.3rem;
  --fs-h4:      1.125rem;
  --fs-body-lg: 1.0625rem;
  --fs-body:    1rem;
  --fs-small:   0.9375rem;
  --fs-micro:   0.8125rem;

  --lh-tight: 1.12;
  --lh-snug:  1.32;
  --lh-base:  1.6;
  --lh-relaxed: 1.72;

  --tr-display: -0.03em;
  --tr-h:       -0.015em;
  --tr-body:    -0.003em;
  --tr-eyebrow: 0.16em;

  /* ── Spacing — 4pt grid ───────────────────────────────────────────────── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-7:28px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-14:56px;
  --sp-16:64px; --sp-20:80px; --sp-24:96px; --sp-32:128px; --sp-40:160px;

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  --shadow-1: 0 1px 2px rgba(14,26,43,0.04), 0 1px 1px rgba(14,26,43,0.03);
  --shadow-2: 0 2px 4px rgba(14,26,43,0.05), 0 6px 18px -8px rgba(14,26,43,0.08);
  --shadow-3: 0 4px 8px rgba(14,26,43,0.06), 0 18px 36px -12px rgba(14,26,43,0.14);
  --ring-focus: 0 0 0 3px var(--marine-200);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:140ms; --dur-med:220ms; --dur-slow:380ms;

  --max-w: 1200px;
  --reading-w: 760px;
}

/* Warm palette variant (tweakable) */
[data-palette="warm"] {
  --bg: var(--warm-bg);
  --bg-deep: var(--warm-bg-deep);
  --surface: var(--cool-white);
  --surface-alt: var(--warm-paper);
  --fg: #0F1B2D;
  --fg-body: #2C3A4D;
  --fg-muted: #5C6A7C;
  --border: #C7CFD9;
  --border-soft: #E4E8ED;
}

/* Accent intensity variants — shift the terracotta hue itself, not just opacity */
[data-accent="quiet"]  { --accent: #AC8675; --accent-strength: 0.5; }   /* dusty, muted */
[data-accent="bold"]   { --accent: #D2592F; --accent-strength: 1.5; }   /* punchy */

/* Motif intensity variants — scale all capillary networks together */
.motif-svg { opacity: calc(var(--motif-scale, 1)); transition: opacity var(--dur-med) var(--ease-soft); }
[data-motif="subtle"]  { --motif-scale: 0.45; }
[data-motif="bold"]    { --motif-scale: 1.55; }
[data-motif="off"]     { --motif-scale: 0;    }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-base);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Type utilities ───────────────────────────────────────────────────────── */
.display, h1, h2, h3, h4 {
  color: var(--fg);
  letter-spacing: var(--tr-h);
  line-height: var(--lh-snug);
  text-wrap: balance;
  margin: 0;
}
.display {
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}
h1 { font-size: var(--fs-h1); font-weight: 600; }
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; }

.eyebrow {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--primary);
}
.serif { font-style: italic; font-weight: 400; }
.muted { color: var(--fg-muted); }
.num {
  font-feature-settings: "tnum","zero","ss01";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

p { margin: 0; }
a { color: var(--primary); text-decoration: none; }

:where(button, a, [role="button"], input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}