/* ============================================================
   VARSAT — Typography tokens
   Outfit for everything readable (Light body, Medium headings).
   Google Sans Code for labels / CTAs / specs — uppercase, tracked,
   often prefixed with "// ".  Never mix both fonts on one line.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-primary:   'Outfit', system-ui, sans-serif;
  --font-secondary: 'Google Sans Code', ui-monospace, 'SFMono-Regular', monospace;

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

  /* ---- Font sizes (desktop) ---- */
  --fs-display:  72px; /* @kind font */
  --fs-h1:       56px; /* @kind font */
  --fs-h2:       40px; /* @kind font */
  --fs-h3:       28px; /* @kind font */
  --fs-h4:       22px; /* @kind font */
  --fs-body-lg:  18px; /* @kind font */
  --fs-body:     16px; /* @kind font */
  --fs-body-sm:  14px; /* @kind font */
  --fs-label:    12px; /* @kind font */
  --fs-caption:  11px; /* @kind font */
  --fs-cta:      14px; /* @kind font */
  --fs-spec:     13px; /* @kind font */

  /* ---- Line heights ---- */
  --lh-tight:   1.05; /* @kind font */
  --lh-snug:    1.15; /* @kind font */
  --lh-heading: 1.2; /* @kind font */
  --lh-body:    1.7; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-display: -0.03em; /* @kind font */
  --ls-heading: -0.02em; /* @kind font */
  --ls-tight:   -0.01em; /* @kind font */
  --ls-normal:  0; /* @kind font */
  --ls-label:   0.08em; /* @kind font */
  --ls-caption: 0.06em; /* @kind font */
  --ls-cta:     0.04em; /* @kind font */
  --ls-spec:    0.02em; /* @kind font */
}

/* ---- Composite type roles (apply as classes or @extend in components) ---- */
.t-display { font-family: var(--font-primary); font-weight: var(--fw-bold);   font-size: var(--fs-display); line-height: var(--lh-tight);   letter-spacing: var(--ls-display); }
.t-h1      { font-family: var(--font-primary); font-weight: var(--fw-bold);   font-size: var(--fs-h1);      line-height: var(--lh-snug);    letter-spacing: var(--ls-heading); }
.t-h2      { font-family: var(--font-primary); font-weight: var(--fw-medium); font-size: var(--fs-h2);      line-height: var(--lh-snug);    letter-spacing: var(--ls-heading); }
.t-h3      { font-family: var(--font-primary); font-weight: var(--fw-medium); font-size: var(--fs-h3);      line-height: var(--lh-heading); letter-spacing: var(--ls-tight);   }
.t-h4      { font-family: var(--font-primary); font-weight: var(--fw-medium); font-size: var(--fs-h4);      line-height: var(--lh-heading); letter-spacing: var(--ls-normal);  }
.t-body-lg { font-family: var(--font-primary); font-weight: var(--fw-light);  font-size: var(--fs-body-lg); line-height: var(--lh-relaxed);  letter-spacing: var(--ls-normal);  }
.t-body    { font-family: var(--font-primary); font-weight: var(--fw-light);  font-size: var(--fs-body);    line-height: var(--lh-body);     letter-spacing: var(--ls-normal);  }
.t-body-sm { font-family: var(--font-primary); font-weight: var(--fw-light);  font-size: var(--fs-body-sm); line-height: 1.6;                letter-spacing: var(--ls-normal);  }

.t-label   { font-family: var(--font-secondary); font-weight: var(--fw-regular);  font-size: var(--fs-label);   line-height: 1.4; letter-spacing: var(--ls-label);   text-transform: uppercase; }
.t-caption { font-family: var(--font-secondary); font-weight: var(--fw-regular);  font-size: var(--fs-caption); line-height: 1.4; letter-spacing: var(--ls-caption); }
.t-cta     { font-family: var(--font-secondary); font-weight: var(--fw-semibold); font-size: var(--fs-cta);     line-height: 1;   letter-spacing: var(--ls-cta);     }
.t-spec    { font-family: var(--font-secondary); font-weight: var(--fw-regular);  font-size: var(--fs-spec);    line-height: 1.6; letter-spacing: var(--ls-spec);    }

/* ---- Mobile step-down ---- */
@media (max-width: 767px) {
  :root {
    --fs-display: 44px;
    --fs-h1:      36px;
    --fs-h2:      28px;
    --fs-h3:      22px;
    --fs-h4:      18px;
    --fs-body-lg: 16px;
  }
}