/* ============================================================
   ControlSolar — TYPOGRAPHY TOKENS
   Display: Clash Display (headlines, big numbers)
   Text:    General Sans (body, UI, labels)
   ============================================================ */
:root {
  /* --- Families --- */
  --font-display: 'Clash Display', 'Geist', system-ui, -apple-system, sans-serif;
  --font-text:    'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

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

  /* --- Fluid display scale (clamp: mobile -> desktop) --- */
  --fs-display-1: clamp(2.75rem, 1.6rem + 5.6vw, 5.5rem);   /* @kind other */ /* hero */
  --fs-display-2: clamp(2.25rem, 1.5rem + 3.6vw, 4rem);     /* @kind other */
  --fs-h1:        clamp(2rem, 1.4rem + 2.6vw, 3rem);        /* @kind other */
  --fs-h2:        clamp(1.6rem, 1.25rem + 1.6vw, 2.25rem);  /* @kind other */
  --fs-h3:        clamp(1.3rem, 1.1rem + 0.9vw, 1.625rem);  /* @kind other */
  --fs-h4:        1.25rem;   /* @kind other */

  /* --- Text scale (fixed) --- */
  --fs-lead:      1.25rem;   /* 20px — hero subcopy  @kind other */
  --fs-body:      1.0625rem; /* 17px — default body  @kind other */
  --fs-sm:        0.9375rem; /* 15px  @kind other */
  --fs-xs:        0.8125rem; /* 13px — captions, meta  @kind other */
  --fs-eyebrow:   0.75rem;   /* 12px — uppercase labels  @kind other */

  /* --- Line heights --- */
  --lh-tight:     1.02;  /* @kind other */
  --lh-snug:      1.12;  /* @kind other */
  --lh-normal:    1.5;   /* @kind other */
  --lh-relaxed:   1.65;  /* @kind other */

  /* --- Letter spacing --- */
  --ls-display:   -0.02em;  /* tighten big Clash  @kind other */
  --ls-tight:     -0.01em;  /* @kind other */
  --ls-normal:    0;        /* @kind other */
  --ls-eyebrow:   0.14em;   /* wide uppercase eyebrows  @kind other */

  /* --- Semantic roles (shorthand `font:` values) --- */
  --type-display:   var(--fw-semibold) var(--fs-display-1)/var(--lh-tight) var(--font-display);  /* @kind other */
  --type-h1:        var(--fw-semibold) var(--fs-h1)/var(--lh-snug) var(--font-display);          /* @kind other */
  --type-h2:        var(--fw-semibold) var(--fs-h2)/var(--lh-snug) var(--font-display);          /* @kind other */
  --type-h3:        var(--fw-medium)   var(--fs-h3)/var(--lh-snug) var(--font-display);          /* @kind other */
  --type-lead:      var(--fw-regular)  var(--fs-lead)/var(--lh-normal) var(--font-text);         /* @kind other */
  --type-body:      var(--fw-regular)  var(--fs-body)/var(--lh-normal) var(--font-text);         /* @kind other */
  --type-label:     var(--fw-medium)   var(--fs-sm)/1.3 var(--font-text);                        /* @kind other */
}