/* =========================================================================
   Growth After Headcount — Design Tokens
   ========================================================================= */

/* ---- Fonts (Google Fonts; flagged as substitutions if you have licensed cuts) ---- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ------------------------------------------------------------------------
     COLOR — Paper-and-ink palette. Warm, editorial, restrained.
     Use `--paper` as default page bg; `--ink` for body copy; single
     `--signal` accent for one-off emphasis (not for fills, not for borders).
     ------------------------------------------------------------------------ */

  /* Surfaces (warm, off-white) */
  --paper:        #F4EFE4;  /* page background — bone */
  --paper-soft:   #EBE5D7;  /* sunken surfaces, alt rows */
  --ivory:        #FBF8F1;  /* card / elevated surfaces */
  --chalk:        #FFFFFF;  /* pure white — sparingly */

  /* Dark surface (used for hero ribbons, footers, audio "dark mode" sections) */
  --night:        #15130F;  /* base dark surface */
  --night-soft:   #2A2620;  /* +1 elevation — cards on night */
  --night-line:   #423C32;  /* visible hairline on night */

  /* Ink (text on light) */
  --ink:          #14110D;  /* primary text */
  --ink-2:        #423E36;  /* secondary text */
  --ink-3:        #6F695D;  /* tertiary / captions */
  --ink-4:        #A8A192;  /* placeholder / disabled */

  /* On dark */
  --moon:         #F4EFE4;  /* primary text on night */
  --moon-2:       #B8B1A2;  /* secondary */
  --moon-3:       #7A7468;  /* tertiary */

  /* Lines */
  --line:         #D9D2C0;
  --line-strong:  #B8AF99;
  --line-faint:   #E6E0CF;

  /* Signal — single accent. Used for links, the "subscribe" CTA, episode
     numbers, and small wayfinding. Not for big fills. */
  --signal:       #B83A1F;  /* persimmon */
  --signal-deep:  #8E2A14;  /* hover / pressed */
  --signal-tint:  #F1DDD3;  /* hairline tinted backgrounds */

  /* Status (rare) */
  --pos:          #4F6B3E;  /* sage */
  --warn:         #B4892B;  /* amber */

  /* --------------------------------------------------------------------
     TYPE — two families. Serif for display; Sans for everything else.
     -------------------------------------------------------------------- */
  --font-serif:  "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-sans:   "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:   "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale (modular, generous) */
  --fs-display:  clamp(56px, 8vw, 128px);
  --fs-h1:       clamp(40px, 5vw, 72px);
  --fs-h2:       clamp(28px, 3vw, 44px);
  --fs-h3:       22px;
  --fs-h4:       18px;
  --fs-lead:     21px;
  --fs-body:     17px;
  --fs-small:    14px;
  --fs-micro:    12px;
  --fs-eyebrow:  12px;  /* used uppercase-letterspaced */

  /* Leading */
  --lh-tight:    1.02;
  --lh-display:  1.05;
  --lh-heading:  1.15;
  --lh-body:     1.55;
  --lh-loose:    1.7;

  /* Letterspacing */
  --tr-display:  -0.02em;
  --tr-heading:  -0.01em;
  --tr-body:      0;
  --tr-eyebrow:   0.16em;

  /* --------------------------------------------------------------------
     SPACING — 4px base, fibonacci-ish for layout.
     -------------------------------------------------------------------- */
  --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:  96px;
  --s-10: 128px;
  --s-11: 192px;

  /* Layout */
  --measure:        66ch;     /* prose width */
  --gutter:         24px;
  --container:      1240px;
  --container-narrow: 880px;

  /* --------------------------------------------------------------------
     RADIUS — sparing. Most surfaces are sharp. Only small chips/pills round.
     -------------------------------------------------------------------- */
  --r-0:   0;
  --r-1:   2px;
  --r-2:   4px;
  --r-3:   8px;
  --r-pill: 999px;

  /* --------------------------------------------------------------------
     SHADOWS — only two. Editorial work uses borders, not shadows.
     -------------------------------------------------------------------- */
  --shadow-sm: 0 1px 0 rgba(20,17,13,0.06), 0 1px 2px rgba(20,17,13,0.04);
  --shadow-lg: 0 12px 28px -8px rgba(20,17,13,0.18), 0 2px 4px rgba(20,17,13,0.06);

  /* Motion */
  --ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    140ms;
  --dur:         220ms;
  --dur-slow:    420ms;
}

/* =========================================================================
   SEMANTIC TYPE — drop-in classes / element defaults
   ========================================================================= */

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
}

.lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}

.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

small, .small { font-size: var(--fs-small); color: var(--ink-2); }
.caption { font-size: var(--fs-small); color: var(--ink-3); }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
a:hover {
  color: var(--signal);
  text-decoration-color: var(--signal);
}

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

::selection { background: var(--ink); color: var(--paper); }