/* Type roles. Headings scale fluidly with clamp() between the mobile and desktop breakpoint;
   below 640px display headings hold their clamp floor and metrics drop one full step. */
:root {
  /* H1 — Display */
  --type-h1-size: clamp(30px, calc(1.25rem + 3.4vw), 68px);
  --type-h1-weight: var(--fw-extrabold); /* @kind font */
  --type-h1-tracking: -0.02em; /* @kind other */
  --type-h1-leading: 1.06; /* @kind other */

  /* H2 */
  --type-h2-size: clamp(24px, calc(1.1rem + 2.0vw), 44px);
  --type-h2-weight: var(--fw-extrabold); /* @kind font */
  --type-h2-tracking: -0.012em; /* @kind other */
  --type-h2-leading: 1.14; /* @kind other */

  /* H3 */
  --type-h3-size: clamp(20px, calc(1.05rem + 0.9vw), 30px);
  --type-h3-weight: var(--fw-bold); /* @kind font */
  --type-h3-tracking: -0.012em; /* @kind other */
  --type-h3-leading: 1.22; /* @kind other */

  /* H4 */
  --type-h4-size: var(--fs-3xl);
  --type-h4-weight: var(--fw-bold); /* @kind font */
  --type-h4-tracking: -0.008em; /* @kind other */
  --type-h4-leading: 1.3; /* @kind other */

  /* H5 */
  --type-h5-size: var(--fs-xl);
  --type-h5-weight: var(--fw-semibold); /* @kind font */
  --type-h5-tracking: -0.004em; /* @kind other */
  --type-h5-leading: 1.35; /* @kind other */

  /* H6 — secondary text colour by default */
  --type-h6-size: var(--fs-lg);
  --type-h6-weight: var(--fw-semibold); /* @kind font */
  --type-h6-tracking: 0em; /* @kind other */
  --type-h6-leading: 1.4; /* @kind other */

  /* Body */
  --type-body-lg-size: var(--fs-md);
  --type-body-lg-leading: 1.65; /* @kind other */
  --type-body-size: var(--fs-base);
  --type-body-leading: 1.65; /* @kind other */
  --type-body-sm-size: var(--fs-sm);
  --type-body-sm-leading: 1.6; /* @kind other */

  /* Label — uppercase, wide tracking */
  --type-label-size: var(--fs-xs);
  --type-label-weight: var(--fw-bold); /* @kind font */
  --type-label-tracking: 0.08em; /* @kind other */
  --type-label-transform: uppercase; /* @kind other */

  /* Caption */
  --type-caption-size: var(--fs-2xs);
  --type-caption-weight: var(--fw-medium); /* @kind font */
  --type-caption-leading: 1.45; /* @kind other */

  /* Dashboard metric — proportional figures at display size, tabular in compact rows */
  --type-metric-size: clamp(36px, calc(1.6rem + 1.8vw), 56px);
  --type-metric-weight: var(--fw-extrabold); /* @kind font */
  --type-metric-tracking: -0.02em; /* @kind other */
  --type-metric-compact-size: var(--fs-3xl);
  --type-metric-compact-weight: var(--fw-bold); /* @kind font */

  /* Navigation */
  --type-nav-size: var(--fs-sm);
  --type-nav-weight: var(--fw-medium); /* @kind font */
  --type-nav-weight-active: var(--fw-semibold);

  /* Table */
  --type-th-size: var(--fs-2xs);
  --type-th-weight: var(--fw-bold); /* @kind font */
  --type-th-tracking: 0.08em; /* @kind other */
  --type-td-size: var(--fs-sm);
  --type-td-weight: var(--fw-regular); /* @kind font */
}