/* ============================================================
   INSTEGRATOR — Colors & Type
   A pure-monochrome, editorial-technical system.
   Ink on warm paper. The integral (∫) is the brand's heart.
   ============================================================ */

:root {
  /* ---------- RAW GREYSCALE RAMP ---------- */
  --grey-0:   #ffffff;
  --grey-25:  #fbfaf8;
  --grey-50:  #f4f3ef;
  --grey-100: #ebe9e3;
  --grey-200: #dcd9d2;
  --grey-300: #c6c3ba;
  --grey-400: #a4a199;
  --grey-500: #807d76;
  --grey-600: #62605a;
  --grey-700: #46443f;
  --grey-800: #2c2b27;
  --grey-900: #1a1916;
  --grey-950: #0e0d0c;

  /* ---------- SEMANTIC SURFACES ---------- */
  --paper:        var(--grey-25);
  --paper-raised: var(--grey-50);
  --surface:      var(--grey-0);
  --ink-bg:       var(--grey-950);

  /* ---------- SEMANTIC FOREGROUND ---------- */
  --fg1: var(--grey-900);
  --fg2: var(--grey-600);
  --fg3: var(--grey-500);
  --fg4: var(--grey-400);
  --fg-on-ink:     #f4f3ef;
  --fg-on-ink-dim: #9b988f;

  /* ---------- LINES ---------- */
  --line:        var(--grey-200);
  --line-strong: var(--grey-300);
  --line-faint:  var(--grey-100);
  --line-on-ink: #34322d;

  /* ---------- FONT FAMILIES ---------- */
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-sans:  "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* ---------- TYPE SCALE (modular, ~1.25) ---------- */
  --t-display:  clamp(48px, 7vw, 88px);
  --t-h1:       clamp(36px, 5vw, 56px);
  --t-h2:       clamp(28px, 3.4vw, 40px);
  --t-h3:       24px;
  --t-h4:       19px;
  --t-body-lg:  19px;
  --t-body:     17px;
  --t-small:    15px;
  --t-caption:  13px;
  --t-eyebrow:  12px;

  /* ---------- WEIGHTS ---------- */
  --w-light: 300;
  --w-reg:   400;
  --w-med:   500;
  --w-semi:  600;
  --w-bold:  700;

  /* ---------- LINE HEIGHTS ---------- */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.6;
  --lh-loose: 1.75;

  /* ---------- TRACKING ---------- */
  --track-eyebrow: 0.18em;
  --track-tight:  -0.02em;
  --track-normal:  0;

  /* ---------- SPACING (8px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---------- RADII ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 1px 2px rgba(14,13,12,0.06);
  --shadow-md: 0 2px 8px rgba(14,13,12,0.07), 0 1px 2px rgba(14,13,12,0.06);
  --shadow-lg: 0 8px 28px rgba(14,13,12,0.10), 0 2px 6px rgba(14,13,12,0.06);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-med);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg3);
}

.display {
  font-family: var(--font-serif);
  font-size: var(--t-display);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg1);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--t-h1);
  font-weight: var(--w-reg);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg1);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--t-h2);
  font-weight: var(--w-reg);
  line-height: var(--lh-snug);
  color: var(--fg1);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  font-weight: var(--w-med);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: var(--w-semi);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-reg);
  line-height: var(--lh-body);
  color: var(--fg2);
  text-wrap: pretty;
}

.body-lg {
  font-family: var(--font-sans);
  font-size: var(--t-body-lg);
  font-weight: var(--w-reg);
  line-height: var(--lh-loose);
  color: var(--fg2);
}

.lead {
  font-family: var(--font-serif);
  font-size: var(--t-body-lg);
  font-weight: var(--w-light);
  font-style: italic;
  line-height: var(--lh-loose);
  color: var(--fg2);
}

.small  { font-family: var(--font-sans); font-size: var(--t-small); line-height: 1.5; color: var(--fg2); }
.caption{ font-family: var(--font-sans); font-size: var(--t-caption); line-height: 1.45; color: var(--fg3); }

code, .code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: var(--w-reg);
  letter-spacing: -0.01em;
}

.data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--w-med);
  color: var(--fg1);
}

a { color: var(--fg1); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { opacity: 0.7; }

.integral {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--w-reg);
}