/* ============================================================
   Maple Pavers — Typography Tokens
   Classical serif headlines (Libre Caslon Text, standing in for
   Trajan Pro) paired with geometric sans body (Montserrat).
   Architectural labels use uppercase + wide tracking.
   ============================================================ */

:root {
  /* Families */
  --font-serif: 'Libre Caslon Text', 'Times New Roman', Georgia, serif;
  --font-sans:  'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-serif); /* headlines */
  --font-body:    var(--font-sans);

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */

  /* ---- Display / Headline scale (serif) ---- */
  --display-lg-size: 64px;  --display-lg-lh: 72px;  --display-lg-ls: -0.02em; --display-lg-weight: 700;
  --headline-xl-size:48px;  --headline-xl-lh:56px;  --headline-xl-weight:600;
  --headline-lg-size:32px;  --headline-lg-lh:40px;  --headline-lg-weight:600;
  --headline-md-size:24px;  --headline-md-lh:32px;  --headline-md-weight:600;

  /* mobile display */
  --display-lg-mobile-size:40px; --display-lg-mobile-lh:48px;

  /* ---- Body scale (sans) ---- */
  --body-lg-size:18px; --body-lg-lh:28px;
  --body-md-size:16px; --body-md-lh:24px;
  --body-sm-size:14px; --body-sm-lh:22px;

  /* ---- Labels / overlines (sans, architectural) ---- */
  --label-lg-size:14px; --label-lg-lh:20px; --label-lg-ls:0.1em;  --label-lg-weight:700;
  --label-md-size:12px; --label-md-lh:16px; --label-md-ls:0.05em; --label-md-weight:600;
  --overline-size:12px; --overline-lh:16px; --overline-ls:0.18em; --overline-weight:700;
}

/* ---- Optional utility classes (consumers may use tokens directly) ---- */
.mp-display    { font-family: var(--font-display); font-weight: var(--display-lg-weight); font-size: var(--display-lg-size); line-height: var(--display-lg-lh); letter-spacing: var(--display-lg-ls); color: var(--text-strong); }
.mp-headline-xl{ font-family: var(--font-display); font-weight: var(--headline-xl-weight); font-size: var(--headline-xl-size); line-height: var(--headline-xl-lh); color: var(--text-strong); }
.mp-headline-lg{ font-family: var(--font-display); font-weight: var(--headline-lg-weight); font-size: var(--headline-lg-size); line-height: var(--headline-lg-lh); color: var(--text-strong); }
.mp-headline-md{ font-family: var(--font-display); font-weight: var(--headline-md-weight); font-size: var(--headline-md-size); line-height: var(--headline-md-lh); color: var(--text-strong); }
.mp-body-lg    { font-family: var(--font-body); font-size: var(--body-lg-size); line-height: var(--body-lg-lh); color: var(--text-body); }
.mp-body       { font-family: var(--font-body); font-size: var(--body-md-size); line-height: var(--body-md-lh); color: var(--text-body); }
.mp-body-sm    { font-family: var(--font-body); font-size: var(--body-sm-size); line-height: var(--body-sm-lh); color: var(--text-muted); }
.mp-label      { font-family: var(--font-body); font-weight: var(--label-lg-weight); font-size: var(--label-lg-size); line-height: var(--label-lg-lh); letter-spacing: var(--label-lg-ls); text-transform: uppercase; }
.mp-overline   { font-family: var(--font-body); font-weight: var(--overline-weight); font-size: var(--overline-size); line-height: var(--overline-lh); letter-spacing: var(--overline-ls); text-transform: uppercase; color: var(--text-brand); }