/* ============================================================
   S-PRO — Typography tokens
   One display family (Archivo), one text family (Inter).
   Big bold black display on near-white. Tight tracking on
   display, comfortable line-height on body, sizes kept a
   touch smaller than expected — trust the whitespace.
   Never mix in serif / script / condensed faces.
   ============================================================ */

:root {
  /* ---- Families ------------------------------------------- */
  --font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:    "Inter", ui-monospace, "SF Mono", Menlo, monospace;

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

  /* ---- Display scale (Archivo) ----------------------------
     Headline type is set in Archivo Medium/SemiBold with
     tight negative tracking. It can wrap and dominate. ------ */
  --display-1-size:    160px;
  --display-1-line: 0.96;    /* @kind other */
  --display-1-track: -0.03em;/* @kind other */
  --display-1-weight: 500;   /* @kind other */
  --display-2-size:    100px;
  --display-2-line: 1.0;     /* @kind other */
  --display-2-track: -0.03em;/* @kind other */
  --display-2-weight: 500;   /* @kind other */
  --display-3-size:    80px;
  --display-3-line: 1.02;    /* @kind other */
  --display-3-track: -0.025em;/* @kind other */
  --display-3-weight: 500;   /* @kind other */

  --h1-size: 60px;
  --h1-line: 1.05;  /* @kind other */
  --h1-track: -0.02em;/* @kind other */
  --h1-weight: 500; /* @kind other */
  --h2-size: 40px;
  --h2-line: 1.1;   /* @kind other */
  --h2-track: -0.02em;/* @kind other */
  --h2-weight: 500; /* @kind other */
  --h3-size: 32px;
  --h3-line: 1.15;  /* @kind other */
  --h3-track: -0.015em;/* @kind other */
  --h3-weight: 500; /* @kind other */
  --h4-size: 24px;
  --h4-line: 1.25;  /* @kind other */
  --h4-track: -0.01em;/* @kind other */
  --h4-weight: 500; /* @kind other */

  /* ---- Body / UI scale (Inter) ---------------------------- */
  --body-lg-size:   18px;
  --body-lg-line: 1.55;/* @kind other */
  --body-size:      16px;
  --body-line:    1.5; /* @kind other */
  --body-sm-size:   14px;
  --body-sm-line: 1.5; /* @kind other */
  --caption-size:   12px;
  --caption-line: 1.4; /* @kind other */

  /* ---- Label / eyebrow (the "● label" rows) ---------------
     Set in Inter, used left-of-content as section markers. - */
  --label-size:     16px;
  --label-line: 1.2;   /* @kind other */
  --label-track: 0;    /* @kind other */
  --label-sm-size:  14px;
  --label-sm-line: 1.2;/* @kind other */
  --label-sm-track: -0.01em;/* @kind other */

  /* ---- Overline (rare, uppercase metadata) ---------------- */
  --overline-size:  12px;
  --overline-line: 1.3;/* @kind other */
  --overline-track: 0.08em;/* @kind other */
}