/* ==========================================================================
   VALLEY CRAFT — design tokens
   Color values below are the exact Valley Craft palette (kept in lockstep
   with src/tokens.mjs, which is the source verify.mjs checks against).
   Two extra text-safe variants (--brass-ink, --sky-link) exist purely so
   small brass/sky text clears WCAG AA — see src/tokens.mjs header comment.
   ========================================================================== */

@font-face {
  font-family: "Lora";
  src:
    url("/assets/fonts/lora-var.woff") format("woff-variations"),
    url("/assets/fonts/lora-var.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src:
    url("/assets/fonts/lora-italic-var.woff") format("woff-variations"),
    url("/assets/fonts/lora-italic-var.woff") format("woff");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Carlito";
  src: url("/assets/fonts/carlito-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Carlito";
  src: url("/assets/fonts/carlito-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Carlito";
  src: url("/assets/fonts/carlito-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/*
 * Metric-matched fallback faces — prevents layout shift when the webfont
 * swaps in. Values computed directly from the real font files with
 * fontTools (hhea ascent/descent/lineGap as % of unitsPerEm; size-adjust =
 * ratio of xAvgCharWidth/unitsPerEm between the webfont and a reference
 * fallback). Carlito is Google's metric-compatible replacement for
 * Calibri, so its fallback is a near-exact match (size-adjust ~100%).
 * Lora has no metric-compatible system serif; its size-adjust (109%) is
 * calibrated against Liberation Serif, a Times New Roman metric clone —
 * the closest measurable proxy available. It will be a closer match for
 * "Times New Roman" than for "Georgia" specifically (Georgia runs wider),
 * but ascent/descent-override — the values that actually stop vertical
 * reflow — are exact regardless of which local serif resolves.
 */
@font-face {
  font-family: "Lora Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Liberation Serif"), local("Tinos");
  ascent-override: 100.6%;
  descent-override: 27.4%;
  line-gap-override: 0%;
  size-adjust: 109%;
}
@font-face {
  font-family: "Carlito Fallback";
  src: local("Calibri"), local("Segoe UI"), local("Arial"), local("Helvetica");
  ascent-override: 95.2%;
  descent-override: 26.9%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

:root {
  /* ---- color ---- */
  --paper: #FAF6EE;
  --paper-deep: #F2EBDD;
  --ink: #241F1A;
  --ink-soft: #554C41;
  --rule: #D9CEBB;
  --barn: #9B3A2B;
  --barn-deep: #7A2C20;
  --pine: #2F4A38;
  --pine-deep: #1F3326;
  --brass: #B4894A;
  --brass-light: #D8B87C;
  --sky: #6E8FA6;
  /* text-safe derivatives, see header note */
  --brass-ink: #83653A;
  --sky-link: #A0B4C0;

  /* ---- surfaces on dark ---- */
  --on-pine: var(--paper);
  --on-pine-soft: #CBD8CE;

  /* ---- type ---- */
  --font-display: "Lora", "Lora Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Carlito", "Carlito Fallback", Calibri, "Segoe UI", system-ui, sans-serif;

  --text-h1: clamp(2.6rem, 1.6rem + 4.2vw, 5rem);
  --text-h2: clamp(2rem, 1.62rem + 1.9vw, 3.1rem);
  --text-h3: clamp(1.4rem, 1.24rem + 0.8vw, 1.9rem);
  --text-h4: clamp(1.15rem, 1.06rem + 0.4vw, 1.35rem);
  --text-lead: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --text-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.15rem);
  --text-small: 0.92rem;
  --text-eyebrow: 0.72rem;

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-body: 1.65;

  /* ---- space ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: clamp(3rem, 2.3rem + 3vw, 5rem);
  --space-2xl: clamp(4rem, 2.8rem + 5vw, 7.5rem);

  /* ---- layout ---- */
  --container: 74rem;
  --container-narrow: 46rem;
  --measure: 68ch;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* ---- effects ---- */
  --shadow-frame: 0 14px 28px -16px rgba(36, 31, 26, 0.38), 0 3px 8px -2px rgba(36, 31, 26, 0.16);
  --shadow-pop: 0 20px 40px -18px rgba(31, 51, 38, 0.45);
  --ease-page: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-reveal: 500ms;
  --dur-stroke: 900ms;
  --stagger-step: 60ms;
  --dur-link: 220ms;
}