/* Design tokens — HoA-leaning reference pass.
   All components read from these vars; swap values to finish rebrand. */

/* ---------- Fonts ----------
   IvyPresto Display is installed locally via Adobe Creative Cloud.
   We reference it by PostScript / full name through local() — the browser
   picks it up from the macOS font registry, no web kit needed.
   Fallback: Fraunces (from Google Fonts, loaded in index.html). */
@font-face {
  font-family: "IvyPresto Display";
  src: local("IvyPresto Display Thin"), local("IvyPrestoDisplay-Thin");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IvyPresto Display";
  src: local("IvyPresto Display Thin Italic"), local("IvyPrestoDisplay-ThinItalic");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IvyPresto Display";
  src: local("IvyPresto Display Light"), local("IvyPrestoDisplay-Light");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IvyPresto Display";
  src: local("IvyPresto Display Light Italic"), local("IvyPrestoDisplay-LightItalic");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IvyPresto Display";
  src: local("IvyPresto Display"), local("IvyPresto Display Regular"), local("IvyPrestoDisplay-Regular"), local("IvyPrestoDisplay");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IvyPresto Display";
  src: local("IvyPresto Display Italic"), local("IvyPrestoDisplay-Italic");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IvyPresto Display";
  src: local("IvyPresto Display SemiBold"), local("IvyPrestoDisplay-SemiBold"), local("IvyPresto Display Semibold");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IvyPresto Display";
  src: local("IvyPresto Display SemiBold Italic"), local("IvyPrestoDisplay-SemiBoldItalic");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IvyPresto Display";
  src: local("IvyPresto Display Bold"), local("IvyPrestoDisplay-Bold");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IvyPresto Display";
  src: local("IvyPresto Display Bold Italic"), local("IvyPrestoDisplay-BoldItalic");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Gotham — local .otf files licensed to the owner. */
@font-face {
  font-family: "Gotham";
  src: url("../fonts/Gotham-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("../fonts/Gotham-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("../fonts/Gotham-Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("../fonts/Gotham-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color */
  --color-paper: #ffffff;
  --color-paper-soft: #f3f3f3;
  --color-paper-alt: #f1f2f1;
  --color-ink: #0a0a0a;
  --color-ink-soft: #222222;
  --color-ink-alt: #232323;

  --color-text: #0a0a0a;
  --color-text-muted: #5d5d5d;
  --color-text-dim: #a5a5a5;
  --color-text-invert: #ffffff;
  --color-text-invert-muted: rgba(255, 255, 255, 0.72);

  --color-line: #e6e6e6;
  --color-line-soft: #e2e2e2;
  --color-line-dark: rgba(255, 255, 255, 0.1);

  --color-accent: #de322d;
  --color-accent-hover: #f7413d;
  --color-accent-ink: #ffffff;

  /* Typography — IvyPresto Display delivered via Adobe Fonts (Typekit
     project yrz5pbo) as "ivypresto-display"; falls back to the local
     Adobe CC install ("IvyPresto Display") when the visitor's machine
     has it; finally to Fraunces (Google Fonts) and a system serif.
     Gotham serves body/UI. */
  --font-display: "ivypresto-display", "IvyPresto Display", "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Gotham", "Inter", system-ui, sans-serif;
  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Type scale — fluid clamp(min, vw + offset, max). The middle term
     uses vw + a fixed offset so values rise smoothly between mobile
     and desktop instead of jumping at the boundary.
     2026-05-02 responsive pass: mobile floor tightened AND desktop
     ceiling pulled down ~10% so headings stop dominating the page. */
  --fs-hero: clamp(2.25rem, 6vw + 0.5rem, 6.5rem);  /*  36 → 104 */
  --fs-h2:   clamp(1.5rem, 2.6vw + 0.5rem, 2.25rem);/*  24 →  36 */
  --fs-h3:   clamp(1.1875rem, 1.8vw + 0.5rem, 1.75rem);/* 19 → 28 */
  --fs-lead: clamp(0.9375rem, 0.9vw + 0.5rem, 1.25rem);/* 15 → 20 */
  --fs-body: 1rem;            /* 16 — minimum readable, fixed */
  --fs-sm:   0.875rem;        /* 14 */
  --fs-xs:   0.75rem;         /* 12 */
  --fs-eyebrow: 0.75rem;      /* 12 */

  --lh-tight: 1.05;
  --lh-display: 1.2;
  --lh-body: 1.5;

  --tr-tight: -0.015em;
  --tr-display: -0.01em;
  --tr-eyebrow: 0.18em;

  /* Spacing (4pt grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 120px;
  --space-11: 140px;
  --space-12: 160px;

  --section-pad-y: clamp(var(--space-8), 10vw, var(--space-11));
  --container-pad-x: clamp(var(--space-5), 4vw, var(--space-7));

  /* Radii — all rectangles sharp. Pill kept only for true-circle elements
     (arrow-circle, chip dot, avatars). */
  --radius-none: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 999px;

  /* Layout */
  --content-max: 1280px;
  --prose-max: 760px;
  --nav-height: 92px;

  /* Motion */
  --motion-fast: 150ms;
  --motion-base: 300ms;
  --motion-slow: 600ms;
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Shadows (used sparingly) */
  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.04);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}