/* =========================================================
   Max Cooper — Colors & Type
   ---------------------------------------------------------
   Typeface: Cormorant Garamond (serif, all weights).
   Palette: warm paper (#f5f2ea) against near-black (#111),
   with muted stone accents from the Interra scope draft.
   Tone: editorial, quiet, restrained. No gradients, no neon.
   ========================================================= */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: block;
  src: url('fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/cormorant-garamond-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: block;
  src: url('fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations');
}

:root {
  /* ---------- PAPER / INK ---------- */
  --paper:        #f5f2ea;   /* site background — warm cream */
  --paper-2:      #f0ece0;   /* alt surface (Figma frame bg) */
  --paper-edge:   #e8e3d4;   /* hairline on paper */
  --ink:          #111111;   /* primary text, buttons */
  --ink-pure:     #000000;   /* reserved: diagrams, strokes */

  /* ---------- STONE (from Figma scope doc) ---------- */
  --stone-400:    rgb(155, 145, 127);   /* primary stone — labels, strokes */
  --stone-600:    rgb(107, 95, 79);     /* body accent, quiet body copy */
  --stone-200:    #d9d9d9;              /* dividers, bounding boxes */

  /* ---------- INK SCALE (alpha on paper) ---------- */
  --fg:           #111111;              /* 100% */
  --fg-1:         rgba(0,0,0,0.85);     /* body emphasis */
  --fg-2:         rgba(0,0,0,0.70);     /* body default */
  --fg-3:         rgba(0,0,0,0.55);     /* muted */
  --fg-4:         rgba(0,0,0,0.45);     /* labels / eyebrows */
  --fg-5:         rgba(0,0,0,0.35);     /* placeholder / decorative */
  --fg-6:         rgba(0,0,0,0.20);     /* disabled / scale extremes */

  /* ---------- RULES / EDGES ---------- */
  --rule:         rgba(0,0,0,0.10);     /* section borders, hairlines */
  --rule-strong:  rgba(0,0,0,0.22);     /* button borders at rest */
  --rule-hover:   rgba(0,0,0,0.50);     /* button borders on hover */

  /* ---------- SELECTION ---------- */
  --selection-bg: #e5e7eb;              /* tailwind gray-200 */

  /* ---------- SEMANTIC (there is no green / red / blue palette.
     Status is communicated typographically, not chromatically.) ---------- */
  --focus-ring:   rgba(0,0,0,0.50);

  /* ---------- TYPE FAMILY ---------- */
  --font-serif:   'Cormorant Garamond', 'EB Garamond', Garamond, 'Times New Roman', Georgia, serif;
  --font-display: var(--font-serif);
  --font-body:    var(--font-serif);
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- WEIGHTS ---------- */
  --w-light:      300;  /* display, h1, h2 */
  --w-regular:    400;
  --w-medium:     500;  /* italic callouts, small caps labels */
  --w-semibold:   600;
  --w-bold:       700;

  /* ---------- TYPE SCALE ---------- */
  /* Display & heads use weight 300 with tight tracking. */
  --fs-display:   72px;  --lh-display: 1.05;  --tr-display: -0.02em;
  --fs-h1:        48px;  --lh-h1:      1.05;  --tr-h1:      -0.02em;
  --fs-h2:        36px;  --lh-h2:      1.05;  --tr-h2:      -0.029em;  /* matches Figma -1.053px/36 */
  --fs-h3:        30px;  --lh-h3:      1.20;  --tr-h3:      -0.01em;
  --fs-h4:        24px;  --lh-h4:      1.25;  --tr-h4:      -0.01em;
  --fs-lead:      20px;  --lh-lead:    1.80;  --tr-lead:     0;         /* leading-9 on 20px */
  --fs-body-lg:   18px;  --lh-body-lg: 1.55;  --tr-body-lg:  0;
  --fs-body:      16px;  --lh-body:    1.75;  --tr-body:     0;
  --fs-small:     15px;  --lh-small:   1.65;  --tr-small:    0;
  --fs-sm:        13px;  --lh-sm:      1.55;  --tr-sm:       0;
  --fs-label:     11px;  --lh-label:   1.30;  --tr-label:    0.22em;    /* uppercase eyebrow */
  --fs-label-sm:  10px;  --lh-label-sm:1.30;  --tr-label-sm: 0.12em;

  /* ---------- SPACING ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;  /* section padding — py-28 */

  /* ---------- RADII (almost none — the site uses hard corners) ---------- */
  --radius-0: 0;
  --radius-1: 2px;   /* fine detail only */
  --radius-full: 9999px;  /* dots, pips */

  /* ---------- SHADOWS (none by default — elevation is rare) ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(0,0,0,0.04);

  /* ---------- MOTION ---------- */
  --ease:           cubic-bezier(0.4, 0.0, 0.2, 1);  /* ease */
  --ease-in-out:    cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:       120ms;   /* color swaps on hover */
  --dur-base:       150ms;   /* border-color on buttons */
  --dur-slow:       280ms;   /* quiz slide transitions */
  --dur-xfade:      700ms;   /* carousel fades */

  /* ---------- LAYOUT ---------- */
  --max-prose:    48rem;   /* max-w-3xl */
  --max-page:     64rem;   /* max-w-5xl — main page width */
  --gutter:       24px;    /* px-6 */
  --gutter-lg:    40px;    /* sm:px-10 */
}

/* =========================================================
   Semantic classes — use these instead of raw vars when
   building new UI. They already resolve weight/leading/case.
   ========================================================= */

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--selection-bg); color: inherit; }

/* Headings — light weight, tight tracking, serif */
.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}
.h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
}
.h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
}
.h3, h3 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
}
.h4, h4 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--tr-h4);
}

/* Lead paragraph — used directly under h1 */
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--fg-2);
  font-weight: var(--w-regular);
}

/* Body paragraph — default */
p, .p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.p-lg { font-size: var(--fs-body-lg); line-height: 1.75; color: var(--fg-2); }
.p-sm { font-size: var(--fs-sm);      line-height: var(--lh-sm); color: var(--fg-2); }

/* Italic callout — medium weight italic, stone-600 */
.callout {
  font-style: italic;
  font-weight: var(--w-medium);
  color: var(--stone-600);
  font-size: var(--fs-body-lg);
  line-height: 1.11;
}

/* Eyebrow / small-caps label — uppercase, heavily tracked */
.eyebrow, .label {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-4);
  font-weight: var(--w-regular);
}
.eyebrow-sm {
  font-size: var(--fs-label-sm);
  letter-spacing: var(--tr-label-sm);
  text-transform: uppercase;
  color: var(--fg-5);
  font-weight: var(--w-regular);
}
.eyebrow-tight { /* header wordmark — less tracking */
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-1);
}

/* Links — underline on offset, color-inherit */
a, .a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Mono — for dates, coordinates, occasional data */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Hairline rule */
.rule { border-top: 1px solid var(--rule); }

/* Buttons — ghost, hard-corner, tracked uppercase */
.btn {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 12px 24px;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.btn:hover { border-color: var(--rule-hover); color: var(--ink); }
.btn-solid {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-solid:hover { background: #000; border-color: #000; }