/* eighthdoor — Typography tokens
   Two faces, both self-hosted from the brand's real binaries:
     Display / Label → Beausite Fit Trial  (the one distinctive accent face)
     Text            → Manrope              (the dominant face, many weights)
   The brand is mainly Manrope across weights, with Beausite Fit as the display +
   UPPERCASE-label accent. See readme.md → VISUAL FOUNDATIONS. */

:root {
  /* Families — both display and label resolve to Beausite Fit (one accent face). */
  --font-display: 'Beausite Fit Trial', system-ui, sans-serif;
  --font-label:   'Beausite Fit Trial', system-ui, sans-serif;
  --font-text:    'Manrope', system-ui, sans-serif;

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Type scale — name : size / line-height (from eighthdoor/* styles) */
  --h1-size: 40px;  --h1-line: 45px;   /* Display, light */
  --h2-size: 30px;  --h2-line: 36px;   /* Display/Label, light */
  --h3-size: 24px;  --h3-line: 30px;   /* Manrope medium */
  --h4-size: 20px;  --h4-line: 30px;   /* Manrope regular */
  --p1-size: 16px;  --p1-line: 24px;
  --p2-size: 14px;  --p2-line: 20px;
  --p3-size: 12px;  --p3-line: 18px;
  --cta-size: 16px; --cta-line: 20px;
  --c1-size: 12px;  --c1-line: 16px;   /* caption, uppercase */
  --c2-size: 10px;  --c2-line: 14px;   /* micro caption, uppercase */

  --tracking-caption: 0.02em;
}

/* ---- Ready-made type classes (optional convenience) ---- */
.ed-h1 { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--h1-size); line-height: var(--h1-line); color: var(--text-primary); }
.ed-h2 { font-family: var(--font-label);   font-weight: var(--weight-light); font-size: var(--h2-size); line-height: var(--h2-line); color: var(--text-primary); }
.ed-h3 { font-family: var(--font-text); font-weight: var(--weight-medium); font-size: var(--h3-size); line-height: var(--h3-line); color: var(--text-primary); }
.ed-h4 { font-family: var(--font-text); font-weight: var(--weight-regular); font-size: var(--h4-size); line-height: var(--h4-line); color: var(--text-primary); }
.ed-p1 { font-family: var(--font-text); font-weight: var(--weight-regular); font-size: var(--p1-size); line-height: var(--p1-line); color: var(--text-primary); }
.ed-p2 { font-family: var(--font-text); font-weight: var(--weight-regular); font-size: var(--p2-size); line-height: var(--p2-line); color: var(--text-primary); }
.ed-p3 { font-family: var(--font-text); font-weight: var(--weight-regular); font-size: var(--p3-size); line-height: var(--p3-line); color: var(--text-primary); }

.ed-cta-display { font-family: var(--font-label); font-weight: var(--weight-regular); font-size: var(--cta-size); line-height: var(--cta-line); text-transform: uppercase; letter-spacing: var(--tracking-caption); }
.ed-cta-text    { font-family: var(--font-text);  font-weight: var(--weight-medium);  font-size: var(--cta-size); line-height: var(--cta-line); text-transform: capitalize; }

.ed-c1 { font-family: var(--font-label); font-weight: var(--weight-regular); font-size: var(--c1-size); line-height: var(--c1-line); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.ed-c2 { font-family: var(--font-text);  font-weight: var(--weight-medium);  font-size: var(--c2-size); line-height: var(--c2-line); letter-spacing: var(--tracking-caption); text-transform: uppercase; }