/* ═══════════════════════════════════════════════════════════════════
   Dyad Health — Design Tokens
   Brand Guidelines v1.0 · April 2026
   Care for one. Care for both.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ─────────────────────────────────
     COLOR — 60/30/10 rule
     Navy dominates · Sea Green supports · Peach signals · Ochre rare
     ───────────────────────────────── */

  /* Primary palette */
  --dyad-navy: #001D3D;          /* Deep Navy — dominant anchor, B2B authority */
  --dyad-navy-tint: #0A3460;     /* Community layer in diagrams */
  --dyad-sea-green: #156E81;     /* Healthcare forward motion, mark left circle */
  --dyad-teal: #3CA2B8;          /* Data & diagrams, secondary signal */
  --dyad-peach: #F4956A;         /* The human, mark right circle */
  --dyad-ochre: #C49430;         /* Mark intersection only — rare */

  /* Surfaces & grounds */
  --dyad-white: #FFFFFF;
  --dyad-ice: #F4F7FA;           /* Primary background — bright, cool */
  --dyad-peach-light: #FEF0E8;   /* Human surface */
  --dyad-teal-light: #E0F0F5;    /* Care surface */

  /* Ink */
  --dyad-body: #1E3A52;          /* Body copy ink */
  --dyad-mid: #4E7080;           /* Captions only — AA borderline */
  --dyad-rule: #D4DBE3;          /* Hairline rule on ice */
  --dyad-rule-cream: #D4CFC4;    /* Hairline rule on warm grounds */

  /* Semantic — plan / risk / status */
  --dyad-ok: #1E7E34;
  --dyad-ok-soft: #E4F5E8;
  --dyad-warn: #C49430;          /* reuse ochre for cautions */
  --dyad-warn-soft: #FDF6E3;
  --dyad-alert: #C0392B;
  --dyad-alert-soft: #F5E6E4;

  /* ─────────────────────────────────
     SEMANTIC — fg / bg / fill
     ───────────────────────────────── */
  --fg-1: var(--dyad-navy);        /* primary ink */
  --fg-2: var(--dyad-body);        /* body */
  --fg-3: var(--dyad-mid);         /* secondary / captions */
  --fg-brand: var(--dyad-sea-green);
  --fg-human: var(--dyad-peach);
  --fg-on-dark: var(--dyad-ice);

  --bg-1: var(--dyad-white);
  --bg-2: var(--dyad-ice);
  --bg-warm: var(--dyad-peach-light);
  --bg-care: var(--dyad-teal-light);
  --bg-inverse: var(--dyad-navy);

  --border-1: var(--dyad-rule);
  --border-strong: var(--dyad-navy);

  /* ─────────────────────────────────
     TYPE
     ───────────────────────────────── */
  --font-display: 'Playfair Display', 'Freight Display', 'Domaine Display', 'Canela', 'GT Alpina', Georgia, serif;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', ui-monospace, monospace;

  /* Scale (digital; px ≈ pt×1.33) */
  --text-display-hero: clamp(44px, 6vw, 72px);
  --text-display: clamp(32px, 4vw, 52px);
  --text-display-sm: clamp(24px, 2.4vw, 32px);
  --text-section: 24px;
  --text-sub: 14px;
  --text-body: 16px;
  --text-small: 13px;
  --text-label: 11px;
  --text-micro: 10px;

  --leading-display: 1.05;
  --leading-body: 1.65;
  --leading-tight: 1.3;

  --tracking-label: 0.12em;
  --tracking-eyebrow: 0.18em;

  /* ─────────────────────────────────
     SPACING — 8px base
     ───────────────────────────────── */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 80px;
  --s-10: 120px;

  /* ─────────────────────────────────
     RADII — restrained, editorial
     ───────────────────────────────── */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;     /* fields, tight chips */
  --r-3: 8px;     /* cards */
  --r-full: 9999px;

  /* ─────────────────────────────────
     SHADOWS — almost none
     ───────────────────────────────── */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(0, 29, 61, 0.06);
  --shadow-2: 0 2px 8px rgba(0, 29, 61, 0.08), 0 1px 2px rgba(0, 29, 61, 0.04);

  /* ─────────────────────────────────
     MOTION — quiet
     ───────────────────────────────── */
  --ease-quiet: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  /* layout */
  --max-w: 1320px;
}

/* ═══════════════════════════════════════════════════════════════════
   BASE / RESET
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg-2);
  background: var(--bg-2);
  text-rendering: optimizeLegibility;
}

/* ═══════════════════════════════════════════════════════════════════
   SEMANTIC TYPE HELPERS
   ═══════════════════════════════════════════════════════════════════ */

.h-display,
h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: -0.015em;
  color: var(--fg-1);
  margin: 0;
}

.h-display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-display-sm);
  line-height: var(--leading-tight);
  color: var(--fg-human);
  margin: 0;
}

.h-section,
h2.section {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-section);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0;
}

.h-sub,
h3.sub {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sub);
  line-height: 1.4;
  color: var(--fg-1);
  margin: 0;
}

.p-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 72ch;
  margin: 0;
}

.p-body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg-2);
  max-width: 72ch;
  margin: 0;
}

.eyebrow,
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-3);
  margin: 0;
}

.label,
.t-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-3);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--fg-2);
}

.t-metric {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  color: var(--fg-1);
  letter-spacing: -0.02em;
}

.t-human {
  color: var(--fg-human);
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════
   UTILITY
   ═══════════════════════════════════════════════════════════════════ */

.card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: var(--s-5);
}

.card-editorial {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-top: 3px solid var(--dyad-navy);
  border-radius: 0;
  padding: var(--s-5);
}

.rule-top { border-top: 3px solid var(--dyad-navy); }
.rule-bottom { border-bottom: 1px solid var(--border-1); }

/* capsule / badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: var(--r-1);
  background: transparent;
}
.badge.navy    { color: var(--dyad-navy); background: var(--dyad-ice); }
.badge.sea     { color: var(--dyad-sea-green); background: var(--dyad-teal-light); }
.badge.peach   { color: #A65C3D; background: var(--dyad-peach-light); border-color: var(--dyad-peach); }
.badge.ochre   { color: #8A6816; background: #FDF6E3; border-color: var(--dyad-ochre); }
.badge.ok      { color: var(--dyad-ok); background: var(--dyad-ok-soft); border-color: var(--dyad-ok); }
.badge.alert   { color: var(--dyad-alert); background: var(--dyad-alert-soft); border-color: var(--dyad-alert); }

/* CTA button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: var(--r-2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-quiet), color var(--dur-fast) var(--ease-quiet), border-color var(--dur-fast) var(--ease-quiet);
  text-decoration: none;
}
.btn-primary { background: var(--dyad-navy); color: var(--dyad-ice); }
.btn-primary:hover { background: #000f22; }
.btn-secondary { background: var(--dyad-white); color: var(--dyad-navy); border-color: var(--dyad-navy); }
.btn-secondary:hover { background: var(--dyad-ice); }
.btn-sea { background: var(--dyad-sea-green); color: var(--dyad-white); }
.btn-sea:hover { background: #0F5666; }
.btn-ghost { background: transparent; color: var(--dyad-navy); }
.btn-ghost:hover { background: var(--dyad-ice); }

/* field */
.field {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 10px 12px;
  background: var(--dyad-white);
  color: var(--fg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  transition: border-color var(--dur-fast) var(--ease-quiet), box-shadow var(--dur-fast) var(--ease-quiet);
}
.field:focus { outline: none; border-color: var(--dyad-sea-green); box-shadow: 0 0 0 3px rgba(21, 110, 129, 0.15); }

/* divider — single arc stroke, brand-sanctioned section separator */
.arc-divider {
  width: 100%;
  height: 24px;
  display: block;
  color: var(--dyad-rule);
}