/* ============================================================================
   WebPros Design System — TYPOGRAPHY TOKENS
   One well-tuned geometric-humanist sans (Geist) carries every role; Geist Mono
   is the required treatment for every machine identifier. Stylistic sets
   cv11/ss01 calm the a/g. Sentence case everywhere; no tracked uppercase.
   ========================================================================== */

:root {
  /* ---- Families --------------------------------------------------------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Roboto Mono", monospace;

  /* ---- Size scale ------------------------------------------------------- */
  --text-2xs: 11px;  --text-xs: 12px;  --text-sm: 13px;  --text-base: 14px;
  --text-md:  15px;  --text-lg: 16px;  --text-xl: 18px;  --text-2xl: 21px;
  --text-3xl: 26px;  --text-4xl: 33px; --text-5xl: 42px; --text-6xl: 54px;

  /* ---- Line height ------------------------------------------------------ */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

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

  /* ---- Tracking --------------------------------------------------------- */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.011em;
  --tracking-normal: 0em;
  --tracking-wide:   0.02em;

  /* ---- Named roles (semantic type aliases) ------------------------------
     headline — page titles ("Sites")
     title    — card titles, section/dialog headers
     body     — the dominant UI text size; dense by design
     label    — form labels, table headers, badges (sentence case)
     mono     — identifiers (domains, regions, versions, tokens) */
  --type-headline-size:  var(--text-3xl);
  --type-headline-weight: var(--weight-semibold);
  --type-headline-leading: var(--leading-tight);
  --type-headline-tracking: var(--tracking-tight);

  --type-title-size:  var(--text-lg);
  --type-title-weight: var(--weight-semibold);
  --type-title-leading: var(--leading-snug);

  --type-body-size:  var(--text-base);
  --type-body-weight: var(--weight-regular);
  --type-body-leading: var(--leading-normal);

  --type-label-size:  var(--text-sm);
  --type-label-weight: var(--weight-medium);
  --type-label-tracking: var(--tracking-snug);
}