/* Mobile Square — Typography tokens */
:root {
  /* ---- Families ---- */
  --font-display: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;  /* headlines, brand, buttons, labels */
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;  /* body / UI */
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;  /* prices, specs, codes */

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

  /* ---- Type scale (px) ---- */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base:16px;
  --text-lg:  18px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 48px;
  --text-6xl: 62px;
  --text-7xl: 80px;
  --text-8xl: 104px;

  /* ---- Fluid display sizes (hero) ---- */
  --display-sm: clamp(30px, 4vw + 8px, 44px); /* @kind other */
  --display-md: clamp(38px, 6vw + 8px, 68px); /* @kind other */
  --display-lg: clamp(48px, 8vw + 8px, 104px); /* @kind other */

  /* ---- Line heights ---- */
  --leading-none:    1;
  --leading-tight:   1.06;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.68;

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.03em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.16em;  /* uppercase tech labels / eyebrows */

  /* ---- Role tokens ---- */
  --eyebrow-font: var(--font-display);
  --eyebrow-size: var(--text-xs);
  --eyebrow-tracking: var(--tracking-widest);
}