/* Laitent — Typography tokens
   Families and the size / line-height / tracking scale are transcribed from
   the Typography guideline frames and the live website. The source defines no
   named Figma text styles; this scale is derived from observed usage.
   Hero + headline + section serif = Libre Caslon Text.
   Body/UI sans = Inter Tight. Inter is the guideline body face.
   Everett labels fall back to Inter Tight; overline uses Inter Tight (see fonts.css). */

:root {
  /* Families */
  --font-hero:   "Libre Caslon Text", ui-serif, Georgia, "Times New Roman", serif;
  --font-serif:  "Libre Caslon Text", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans:   "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:   "Inter", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-label:  "Inter Tight", "Segoe UI", Roboto, Arial, sans-serif; /* labels & overline; Everett substitute */

  /* Weights */
  --fw-light:   300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */

  /* Tracking (the brand tracks display type at -3%, UI at -2%) */
  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* Type scale — font-size / line-height */
  --text-hero-size: 78px;   --text-hero-lh: 1.1;    /* Libre Caslon, -3% */
  --text-h1-size:   72px;   --text-h1-lh:   82px;   /* Libre Caslon */
  --text-h2-size:   54px;   --text-h2-lh:   58px;   /* Libre Caslon, -3% */
  --text-display-size: 48px; --text-display-lh: 1.2; /* Inter Tight / Libre Caslon */
  --text-title-size: 28px;  --text-title-lh: 1.2;   /* Inter Tight, -2% */
  --text-subtitle-size: 24px; --text-subtitle-lh: 1.2; /* Inter Tight, -2% */
  --text-lead-size: 18px;   --text-lead-lh: 22px;   /* Inter / Inter Tight */
  --text-body-size: 16px;   --text-body-lh: 1.2;
  --text-label-size: 14px;  --text-label-lh: 20px;  /* -3% */
  --text-detail-size: 12px; --text-detail-lh: 16px; /* -3% */
  --text-overline-size: 18px; --text-overline-lh: 1; /* uppercase label */
}

/* Ready-to-use type classes (optional; tokens above are the contract) */
.laitent-hero    { font-family: var(--font-hero); font-weight: var(--fw-regular); font-size: var(--text-hero-size); line-height: var(--text-hero-lh); letter-spacing: var(--tracking-tight); color: var(--text-heading); }
.laitent-h1      { font-family: var(--font-hero); font-weight: var(--fw-regular); font-size: var(--text-h1-size); line-height: var(--text-h1-lh); letter-spacing: var(--tracking-tight); color: var(--text-heading); }
.laitent-h2      { font-family: var(--font-hero); font-weight: var(--fw-regular); font-size: var(--text-h2-size); line-height: var(--text-h2-lh); letter-spacing: var(--tracking-tight); color: var(--text-heading); }
.laitent-display { font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: var(--text-display-size); line-height: 1.4; letter-spacing: var(--tracking-tight); color: var(--text-heading); }
.laitent-title   { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--text-title-size); line-height: var(--text-title-lh); letter-spacing: var(--tracking-snug); color: var(--text-primary); }
.laitent-subtitle{ font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--text-subtitle-size); line-height: var(--text-subtitle-lh); letter-spacing: var(--tracking-snug); color: var(--text-primary); }
.laitent-lead    { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-lead-size); line-height: var(--text-lead-lh); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.laitent-body    { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-body-size); line-height: var(--text-body-lh); color: var(--text-primary); }
.laitent-label   { font-family: var(--font-label); font-weight: var(--fw-regular); font-size: var(--text-label-size); line-height: var(--text-label-lh); letter-spacing: var(--tracking-tight); color: var(--text-secondary); }
.laitent-detail  { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-detail-size); line-height: var(--text-detail-lh); letter-spacing: var(--tracking-tight); color: var(--text-secondary); }
.laitent-overline{ font-family: var(--font-label); font-weight: var(--fw-medium); font-size: var(--text-overline-size); line-height: var(--text-overline-lh); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); }