/* PixelLoom — Type scale
   Three-font system: Sora (display/headline), Hanken Grotesk (body),
   JetBrains Mono (labels/data/status). Values match DESIGN.md's declared
   scale; hero-specific oversized display sizes (seen only in code.html,
   not in the formal scale) are appended as --text-hero-*. */

:root {
  /* Display / headline (Sora) */
  --text-display-lg-size: 48px;
  --text-display-lg-line: 56px;
  --text-display-lg-weight: 700;
  --text-display-lg-tracking: -0.02em;

  --text-headline-lg-size: 32px;
  --text-headline-lg-line: 40px;
  --text-headline-lg-weight: 600;

  --text-headline-lg-mobile-size: 28px;
  --text-headline-lg-mobile-line: 36px;
  --text-headline-lg-mobile-weight: 600;

  /* Oversized hero display, used once per page for the H1 */
  --text-hero-size: clamp(2.5rem, 6vw, 6rem);
  --text-hero-line: 1.05;
  --text-hero-weight: 700;
  --text-hero-tracking: -0.02em;

  /* Body (Hanken Grotesk) */
  --text-body-md-size: 16px;
  --text-body-md-line: 24px;
  --text-body-md-weight: 400;

  --text-body-lg-size: 20px;
  --text-body-lg-line: 30px;
  --text-body-lg-weight: 400;

  /* Label / data (JetBrains Mono) */
  --text-label-sm-size: 12px;
  --text-label-sm-line: 16px;
  --text-label-sm-weight: 500;
  --text-label-sm-tracking: 0.05em;
}