/* ============================================================
   Caplan Regenerative Institute — design tokens
   Palette: Garnet / Institutional Luxury  |  Type: variant D
   Fonts: Libre Caslon Text (headings) + IBM Plex Sans (body)
   Fluid type: Utopia-style clamp(); methodology per WCAG / Utopia / Smashing.
   - Root font-size is NEVER overridden (browser zoom + user prefs intact).
   - vw is always paired with rem in the preferred value (zoom-safe).
   - Absolute floor 14px; body >= 16px (also avoids iOS input auto-zoom).
   ============================================================ */

@import "./fonts.css?v=52";

:root {
  /* ---- Colour (see caplan-palette.md) ---- */
  --paper:#F6F2EA; --surface:#FCFAF5; --ink:#1E1B17; --muted:#56514A; --line:#E6E0D4;
  --garnet:#620D1D;        /* fills / primary buttons / header accents (white text on it) */
  --garnet-hover:#4D0916;  /* hover for garnet fills */
  --garnet-link:#85162B;   /* inline text links ONLY — garnet is too dark, reads black as text */
  --garnet-tint:#EAD9DC;   /* icon backings / passive badges */
  --border-strong:#C9C1B0; --text-soft:#4C4740;

  /* ---- Font families (fallback stacks) ----
     Single grotesque system (Hanken Grotesk), modern sans in the CLP spirit.
     Both vars resolve to the same family so existing references keep working. */
  --font-serif:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-sans:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Wordmark only — institute name in header & footer (Cormorant Garamond Light 300). */
  --font-wordmark:'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* ---- Fluid type scale  (320px -> 1920px) ---- */
  --step--1: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);  /* 14→16px  caption / meta / labels */
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);  /* 16→20px  body */
  --step-1: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);  /* 18→24px  lead / large body */
  --step-2: clamp(1.312rem, 1.125rem + 0.9375vw, 2.25rem);  /* 21→36px  h3 / sub-heading (desktop enlarged) */
  --step-3: clamp(1.562rem, 1.225rem + 1.6875vw, 3.25rem);  /* 25→52px  h2 / section heading (desktop enlarged) */
  --step-4: clamp(1.875rem, 1.4rem + 2.375vw, 4.25rem);  /* 30→68px  h1 / page title (desktop enlarged) */
  --step-5: clamp(2.25rem, 1.6rem + 3.25vw, 5.5rem);  /* 36→88px  hero display (desktop enlarged) */

  /* ---- Line heights ---- */
  --lh-tight:1.05;     /* hero / large display */
  --lh-heading:1.14;   /* h1-h3 */
  --lh-body:1.65;      /* paragraphs */

  /* ---- Measure & container ---- */
  --measure:66ch;                 /* prose line length */
  --container:1800px;             /* layout max width (desktop) */
  --gutter:clamp(0.9375rem, -0.625rem + 4.167vw, 4.5rem);  /* 15px on phones (<=600px); ~50px at 1440 (MacBook), fluid up to 72px on large screens */
}

/* ---- Large-display tier: TV / unscaled 4K (CSS width >= 1920px) ----
   Most 4K monitors run OS scaling 150-200% (CSS width ~1920-2560) and are
   covered by the base scale. This tier continues growth 1920->3840 so text
   stays comfortable on genuinely huge canvases viewed from a distance. */
@media (min-width:1920px) {
  :root {
    --step--1: clamp(1rem, 0.75rem + 0.2083vw, 1.25rem);  /* 16→20px */
    --step-0: clamp(1.25rem, 0.875rem + 0.3125vw, 1.625rem);  /* 20→26px */
    --step-1: clamp(1.5rem, 1.062rem + 0.3646vw, 1.938rem);  /* 24→31px */
    --step-2: clamp(2.25rem, 1.75rem + 0.4167vw, 2.75rem);  /* 36→44px */
    --step-3: clamp(3.25rem, 2.5rem + 0.625vw, 4rem);  /* 52→64px */
    --step-4: clamp(4.25rem, 3.25rem + 0.8333vw, 5.25rem);  /* 68→84px */
    --step-5: clamp(5.5rem, 4.25rem + 1.0417vw, 6.75rem);  /* 88→108px */
    --container:2240px;
    --measure:72ch;
  }
}

/* ---- Base ---- */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--step-0); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3 { font-family:var(--font-serif); font-weight:300; line-height:var(--lh-heading); margin:0 0 .5em; letter-spacing:.02em; text-transform:uppercase; text-wrap:balance; }
h1 { font-size:var(--step-4); line-height:var(--lh-tight); letter-spacing:.015em; }
h2 { font-size:var(--step-3); }
h3 { font-size:var(--step-2); letter-spacing:.035em; }
.display { font-family:var(--font-serif); font-weight:300; font-size:var(--step-5); line-height:var(--lh-tight); letter-spacing:.01em; text-transform:uppercase; text-wrap:balance; }
.lead { font-size:var(--step-1); color:var(--text-soft); line-height:1.45; }
small, .meta, .caption { font-size:var(--step--1); }  /* never below 14px */

p { max-width:var(--measure); text-wrap:pretty; }
.prose { max-width:var(--measure); }
.container { max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }

/* iOS Safari: inputs < 16px trigger focus auto-zoom -> hold at 16px+ */
input, select, textarea { font-size:max(16px, 1rem); font-family:var(--font-sans); }

/* inline links: garnet-link (lighter wine) + underline — garnet itself reads as black at text size */
a { color:var(--garnet-link); text-decoration:underline; text-underline-offset:.15em; }
a:hover { color:var(--garnet); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}