/* ============================================================
   RKVIST — Typography tokens
   Display / headlines: Playfair Display (luxury, editorial).
   Body / UI:           Avenir (clean, modern) — Montserrat is
   the web stand-in where Avenir isn't installed.
   Scale: Display XL/LG/MD · Text XL/LG/MD/SM/XS/XXS.
   Weights: Regular 400 / Medium 500 / Semibold 600 / Bold 700.
   Audience skews 45–70+: body large & legible, generous line-height.
   ============================================================ */
:root {
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Avenir Next', 'Avenir', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

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

  /* ---- Scale (raw sizes) ---- */
  --type-display-xl: 48px;
  --type-display-lg: 40px;
  --type-display-md: 32px;
  --type-text-xl: 24px;
  --type-text-lg: 20px;
  --type-text-md: 18px;
  --type-text-sm: 16px;
  --type-text-xs: 14px;
  --type-text-xxs: 12px;

  /* ---- Role: family / size / line-height / weight / spacing ---- */
  /* Display XL — hero & brand moments */
  --type-display-font: var(--font-display);
  --type-display-size: 48px;
  --type-display-line: 1.05;
  --type-display-weight: var(--fw-bold);
  --type-display-spacing: -0.01em;

  /* Display LG (H1) */
  --type-h1-font: var(--font-display);
  --type-h1-size: 40px;
  --type-h1-line: 1.1;
  --type-h1-weight: var(--fw-bold);
  --type-h1-spacing: -0.005em;

  /* Display MD (H2) */
  --type-h2-font: var(--font-display);
  --type-h2-size: 32px;
  --type-h2-line: 1.18;
  --type-h2-weight: var(--fw-semibold);
  --type-h2-spacing: 0;

  /* Text XL (H3) */
  --type-h3-font: var(--font-display);
  --type-h3-size: 24px;
  --type-h3-line: 1.25;
  --type-h3-weight: var(--fw-semibold);
  --type-h3-spacing: 0;

  /* Text LG (Body-L) */
  --type-body-l-font: var(--font-body);
  --type-body-l-size: 20px;
  --type-body-l-line: 1.5;
  --type-body-l-weight: var(--fw-regular);
  --type-body-l-spacing: 0;

  /* Text MD (Body — default) */
  --type-body-font: var(--font-body);
  --type-body-size: 18px;
  --type-body-line: 1.5;
  --type-body-weight: var(--fw-regular);
  --type-body-spacing: 0;

  /* Text SM (Body-S) */
  --type-body-s-font: var(--font-body);
  --type-body-s-size: 16px;
  --type-body-s-line: 1.5;
  --type-body-s-weight: var(--fw-regular);
  --type-body-s-spacing: 0;

  /* Text XS (Caption) */
  --type-caption-font: var(--font-body);
  --type-caption-size: 14px;
  --type-caption-line: 1.45;
  --type-caption-weight: var(--fw-medium);
  --type-caption-spacing: 0.01em;

  /* Text XXS (Overline — labels, eyebrows) */
  --type-overline-font: var(--font-body);
  --type-overline-size: 12px;
  --type-overline-line: 1.2;
  --type-overline-weight: var(--fw-bold);
  --type-overline-spacing: 0.18em;

  /* Button */
  --type-button-font: var(--font-body);
  --type-button-size: 16px;
  --type-button-line: 1;
  --type-button-weight: var(--fw-bold);
  --type-button-spacing: 0.02em;
}

/* ---- Scale utility classes (Display / Text) ---- */
.rk-display-xl { font-family: var(--font-display); font-size: var(--type-display-xl); line-height: 1.05; font-weight: var(--fw-bold); letter-spacing: -.01em; }
.rk-display-lg { font-family: var(--font-display); font-size: var(--type-display-lg); line-height: 1.1; font-weight: var(--fw-bold); letter-spacing: -.005em; }
.rk-display-md { font-family: var(--font-display); font-size: var(--type-display-md); line-height: 1.18; font-weight: var(--fw-semibold); }
.rk-text-xl  { font-family: var(--font-body); font-size: var(--type-text-xl); line-height: 1.25; }
.rk-text-lg  { font-family: var(--font-body); font-size: var(--type-text-lg); line-height: 1.5; }
.rk-text-md  { font-family: var(--font-body); font-size: var(--type-text-md); line-height: 1.5; }
.rk-text-sm  { font-family: var(--font-body); font-size: var(--type-text-sm); line-height: 1.5; }
.rk-text-xs  { font-family: var(--font-body); font-size: var(--type-text-xs); line-height: 1.45; }
.rk-text-xxs { font-family: var(--font-body); font-size: var(--type-text-xxs); line-height: 1.2; }

/* ---- Legacy role aliases (retained so existing components keep working) ---- */
.rk-display { font-family: var(--type-display-font); font-size: var(--type-display-size); line-height: var(--type-display-line); font-weight: var(--type-display-weight); letter-spacing: var(--type-display-spacing); }
.rk-h1 { font-family: var(--type-h1-font); font-size: var(--type-h1-size); line-height: var(--type-h1-line); font-weight: var(--type-h1-weight); letter-spacing: var(--type-h1-spacing); }
.rk-h2 { font-family: var(--type-h2-font); font-size: var(--type-h2-size); line-height: var(--type-h2-line); font-weight: var(--type-h2-weight); }
.rk-h3 { font-family: var(--type-h3-font); font-size: var(--type-h3-size); line-height: var(--type-h3-line); font-weight: var(--type-h3-weight); }
.rk-body-l { font-family: var(--type-body-l-font); font-size: var(--type-body-l-size); line-height: var(--type-body-l-line); }
.rk-body { font-family: var(--type-body-font); font-size: var(--type-body-size); line-height: var(--type-body-line); }
.rk-body-s { font-family: var(--type-body-s-font); font-size: var(--type-body-s-size); line-height: var(--type-body-s-line); }
.rk-caption { font-family: var(--type-caption-font); font-size: var(--type-caption-size); line-height: var(--type-caption-line); color: var(--text-secondary); }
.rk-overline { font-family: var(--type-overline-font); font-size: var(--type-overline-size); font-weight: var(--type-overline-weight); letter-spacing: var(--type-overline-spacing); text-transform: uppercase; }