/* ============================================================
   Site design tokens — colors & type
   Fonts: Fraunces (display) · Inter (UI) · JetBrains Mono (data),
   loaded from Google Fonts.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,200..700,0..100;1,9..144,200..700,0..100&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── BRAND COLOR (locked) ─────────────────── */
  --site-ink:    #0D1513;  /* primary dark surface · body text on light */
  --site-bone:   #F2EEE5;  /* primary light surface · body text on dark */
  --site-sage:   #7A8F7E;  /* calm accent · positive data · nature */
  --site-amber:  #C9A87C;  /* warmth accent · highlights */
  --site-fog:    #D6D3CC;  /* secondary surface · dividers */
  --site-shadow: #2A302D;  /* depth · quiet overlays */

  /* ── SEMANTIC COLOR (light surface) ───────── */
  --site-bg:           var(--site-bone);
  --site-bg-secondary: var(--site-fog);
  --site-bg-inverse:   var(--site-ink);

  --site-fg1:          var(--site-ink);                  /* primary text */
  --site-fg2:          rgba(13, 21, 19, 0.65);            /* secondary text */
  --site-fg3:          rgba(13, 21, 19, 0.45);            /* tertiary / captions */
  --site-fg-inverse:   var(--site-bone);
  --site-fg-inverse-2: rgba(242, 238, 229, 0.65);
  --site-fg-inverse-3: rgba(242, 238, 229, 0.45);

  --site-border:       rgba(13, 21, 19, 0.12);
  --site-border-strong: rgba(13, 21, 19, 0.22);
  --site-border-inverse: rgba(242, 238, 229, 0.15);
  --site-border-inverse-strong: rgba(242, 238, 229, 0.28);

  --site-accent-calm:  var(--site-sage);
  --site-accent-warm:  var(--site-amber);

  /* ── TYPE FAMILIES ────────────────────────── */
  --site-serif: 'Fraunces', 'Canela', Georgia, 'Times New Roman', serif;
  --site-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --site-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --site-display-vs: "opsz" 144, "SOFT" 50;

  /* ── TYPE SCALE (px) ──────────────────────── */
  --site-fs-xs:   11px;
  --site-fs-sm:   13px;
  --site-fs-base: 15px;
  --site-fs-lg:   17px;
  --site-fs-xl:   22px;
  --site-fs-2xl:  32px;
  --site-fs-3xl:  48px;
  --site-fs-4xl:  72px;
  --site-fs-5xl:  96px;

  /* ── LINE HEIGHTS ─────────────────────────── */
  --site-lh-tight:  0.98;
  --site-lh-snug:   1.18;
  --site-lh-base:   1.55;
  --site-lh-loose:  1.7;

  /* ── SPACING ──────────────────────────────── */
  --site-s-1: 4px;
  --site-s-2: 8px;
  --site-s-3: 12px;
  --site-s-4: 16px;
  --site-s-5: 24px;
  --site-s-6: 32px;
  --site-s-7: 48px;
  --site-s-8: 64px;
  --site-s-9: 96px;
  --site-s-10: 128px;

  /* ── RADIUS ───────────────────────────────── */
  --site-radius-sm: 4px;
  --site-radius-md: 10px;
  --site-radius-lg: 18px;
  --site-radius-xl: 28px;
  --site-radius-pill: 999px;

  /* ── ELEVATION (used sparingly — the site prefers flat) ── */
  --site-shadow-1: 0 1px 0 rgba(13,21,19,0.04), 0 1px 2px rgba(13,21,19,0.04);
  --site-shadow-2: 0 2px 4px rgba(13,21,19,0.04), 0 8px 24px rgba(13,21,19,0.06);
  --site-shadow-3: 0 12px 40px rgba(13,21,19,0.10);
  --site-shadow-inset: inset 0 0 0 1px var(--site-border);

  /* ── MOTION ───────────────────────────────── */
  --site-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --site-dur-ui:     400ms;
  --site-dur-brand:  1600ms;
  --site-dur-breath: 4000ms;

  /* ── BRAND GRADIENT (only allowed gradient — session imagery) ── */
  --site-bloom: radial-gradient(ellipse at 50% 60%, var(--site-sage) 0%, rgba(122,143,126,0.18) 35%, var(--site-ink) 75%);
}

/* ============================================================
   SEMANTIC TYPE (use these classes / tags directly)
   ============================================================ */

html, body {
  font-family: var(--site-sans);
  font-size: var(--site-fs-base);
  line-height: var(--site-lh-base);
  color: var(--site-fg1);
  background: var(--site-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display / editorial */
.site-display,
.site-h-display {
  font-family: var(--site-serif);
  font-weight: 300;
  font-variation-settings: var(--site-display-vs);
  letter-spacing: -0.012em;
  line-height: var(--site-lh-tight);
  color: var(--site-fg1);
}
.site-h-display { font-size: clamp(48px, 8vw, var(--site-fs-5xl)); }

/* Headings */
h1, .site-h1 {
  font-family: var(--site-serif);
  font-weight: 300;
  font-variation-settings: var(--site-display-vs);
  font-size: var(--site-fs-4xl);
  line-height: var(--site-lh-tight);
  letter-spacing: -0.012em;
  margin: 0 0 var(--site-s-5);
}
h2, .site-h2 {
  font-family: var(--site-serif);
  font-weight: 300;
  font-variation-settings: var(--site-display-vs);
  font-size: var(--site-fs-3xl);
  line-height: var(--site-lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--site-s-4);
}
h3, .site-h3 {
  font-family: var(--site-serif);
  font-weight: 400;
  font-size: var(--site-fs-2xl);
  line-height: var(--site-lh-snug);
  letter-spacing: -0.005em;
  margin: 0 0 var(--site-s-4);
}
h4, .site-h4 {
  font-family: var(--site-sans);
  font-weight: 500;
  font-size: var(--site-fs-xl);
  line-height: var(--site-lh-snug);
  margin: 0 0 var(--site-s-3);
}
h5, .site-h5 {
  font-family: var(--site-sans);
  font-weight: 500;
  font-size: var(--site-fs-lg);
  line-height: var(--site-lh-snug);
  margin: 0 0 var(--site-s-2);
}

/* Body */
p, .site-p {
  font-family: var(--site-sans);
  font-size: var(--site-fs-base);
  line-height: var(--site-lh-base);
  color: var(--site-fg1);
  margin: 0 0 var(--site-s-4);
  text-wrap: pretty;
  max-width: 64ch;
}
.site-lede {
  font-family: var(--site-sans);
  font-size: var(--site-fs-lg);
  line-height: var(--site-lh-base);
  color: var(--site-fg2);
  font-weight: 400;
  max-width: 56ch;
}

/* Emphasis — sage color shift on serif display headlines.
   Locked Apr 2026: italic Fraunces Light read as gangly; sage shift is the
   standardized warmth treatment. Use <em> inside Fraunces headlines.
   Italic remains correct ONLY for: regulatory disclaimers (italic Inter),
   the brand tagline ("the autonomic health company"), and the "be still."
   bloom caption. Everywhere else in display type — color shift. */
em, .site-em {
  font-style: normal;
  color: var(--site-sage);
}
.site-em-italic, em.italic {
  font-style: italic;
  color: inherit;
}

/* Eyebrow / mono label */
.site-eyebrow {
  font-family: var(--site-mono);
  font-size: var(--site-fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--site-fg2);
}

/* Data / numeric */
.site-data {
  font-family: var(--site-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--site-fg1);
}
.site-data-lg {
  font-family: var(--site-mono);
  font-weight: 400;
  font-size: var(--site-fs-3xl);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Caption */
.site-caption,
small {
  font-family: var(--site-sans);
  font-size: var(--site-fs-sm);
  line-height: 1.5;
  color: var(--site-fg2);
}

/* Code */
code, kbd, samp {
  font-family: var(--site-mono);
  font-size: 0.92em;
  background: rgba(13,21,19,0.06);
  padding: 1px 6px;
  border-radius: var(--site-radius-sm);
}

a {
  color: var(--site-fg1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--site-border-strong);
  transition: text-decoration-color var(--site-dur-ui) var(--site-ease);
}
a:hover { text-decoration-color: var(--site-fg1); }

hr {
  border: 0;
  border-top: 1px solid var(--site-border);
  margin: var(--site-s-6) 0;
}

/* Inverse surface utilities */
.site-on-dark {
  background: var(--site-ink);
  color: var(--site-fg-inverse);
}
.site-on-dark a { color: var(--site-fg-inverse); text-decoration-color: var(--site-border-inverse-strong); }
.site-on-dark .site-eyebrow,
.site-on-dark .site-caption,
.site-on-dark .site-lede { color: var(--site-fg-inverse-2); }

/* Selection */
::selection {
  background: var(--site-amber);
  color: var(--site-ink);
}