/* ================================================================
   Typography scale — utility-klasser för Futurs typografi-skala
   ================================================================
   Pattern: .type-style-{group}-{variant}-{size}

   Förutsätter att fonts/pattern.css är laddad — fonten laddas inte här.

   Fluid sizing helpers. CSS-variabel-version av:
     clamp(min, lerp(min, max, viewport), max)
   där viewport-rangen är 22.5rem (360px) till 120rem (1920px).

   Både font-size OCH line-height är fluid över samma viewport-range —
   line-height interpolerar kontinuerligt mellan -mobile- och
   -desktop-tokens. Ingen breakpoint-switch.
================================================================ */

/* ================ DISPLAY — Gilroy, fluid ================ */

.type-style-disp-prm-lg {
  font-family: var(--type-family-disp);
  font-weight: var(--type-weight-disp-prm-lg);
  font-style: var(--type-style-disp-default);
  font-size: clamp(
    var(--type-size-disp-lg-min),
    calc(var(--type-size-disp-lg-min) + (var(--type-size-disp-lg-max) - var(--type-size-disp-lg-min)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-size-disp-lg-max)
  );
  line-height: clamp(
    var(--type-line-height-disp-lg-mobile),
    calc(var(--type-line-height-disp-lg-mobile) + (var(--type-line-height-disp-lg-desktop) - var(--type-line-height-disp-lg-mobile)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-line-height-disp-lg-desktop)
  );
  letter-spacing: var(--fnt-letter-spacing-none);
}
.type-style-disp-prm-md {
  font-family: var(--type-family-disp);
  font-weight: var(--type-weight-disp-prm-md);
  font-style: var(--type-style-disp-default);
  font-size: clamp(
    var(--type-size-disp-md-min),
    calc(var(--type-size-disp-md-min) + (var(--type-size-disp-md-max) - var(--type-size-disp-md-min)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-size-disp-md-max)
  );
  line-height: clamp(
    var(--type-line-height-disp-md-mobile),
    calc(var(--type-line-height-disp-md-mobile) + (var(--type-line-height-disp-md-desktop) - var(--type-line-height-disp-md-mobile)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-line-height-disp-md-desktop)
  );
  letter-spacing: var(--fnt-letter-spacing-none);
}
.type-style-disp-prm-sm {
  font-family: var(--type-family-disp);
  font-weight: var(--type-weight-disp-prm-sm);
  font-style: var(--type-style-disp-default);
  font-size: clamp(
    var(--type-size-disp-sm-min),
    calc(var(--type-size-disp-sm-min) + (var(--type-size-disp-sm-max) - var(--type-size-disp-sm-min)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-size-disp-sm-max)
  );
  line-height: clamp(
    var(--type-line-height-disp-sm-mobile),
    calc(var(--type-line-height-disp-sm-mobile) + (var(--type-line-height-disp-sm-desktop) - var(--type-line-height-disp-sm-mobile)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-line-height-disp-sm-desktop)
  );
  letter-spacing: var(--fnt-letter-spacing-none);
}
.type-style-disp-sec-lg {
  font-family: var(--type-family-disp);
  font-weight: var(--type-weight-disp-sec-lg);
  font-style: var(--type-style-disp-default);
  font-size: clamp(
    var(--type-size-disp-lg-min),
    calc(var(--type-size-disp-lg-min) + (var(--type-size-disp-lg-max) - var(--type-size-disp-lg-min)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-size-disp-lg-max)
  );
  line-height: clamp(
    var(--type-line-height-disp-lg-mobile),
    calc(var(--type-line-height-disp-lg-mobile) + (var(--type-line-height-disp-lg-desktop) - var(--type-line-height-disp-lg-mobile)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-line-height-disp-lg-desktop)
  );
  letter-spacing: var(--fnt-letter-spacing-none);
}
.type-style-disp-sec-md {
  font-family: var(--type-family-disp);
  font-weight: var(--type-weight-disp-sec-md);
  font-style: var(--type-style-disp-default);
  font-size: clamp(
    var(--type-size-disp-md-min),
    calc(var(--type-size-disp-md-min) + (var(--type-size-disp-md-max) - var(--type-size-disp-md-min)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-size-disp-md-max)
  );
  line-height: clamp(
    var(--type-line-height-disp-md-mobile),
    calc(var(--type-line-height-disp-md-mobile) + (var(--type-line-height-disp-md-desktop) - var(--type-line-height-disp-md-mobile)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-line-height-disp-md-desktop)
  );
  letter-spacing: var(--fnt-letter-spacing-none);
}
.type-style-disp-sec-sm {
  font-family: var(--type-family-disp);
  font-weight: var(--type-weight-disp-sec-sm);
  font-style: var(--type-style-disp-default);
  font-size: clamp(
    var(--type-size-disp-sm-min),
    calc(var(--type-size-disp-sm-min) + (var(--type-size-disp-sm-max) - var(--type-size-disp-sm-min)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-size-disp-sm-max)
  );
  line-height: clamp(
    var(--type-line-height-disp-sm-mobile),
    calc(var(--type-line-height-disp-sm-mobile) + (var(--type-line-height-disp-sm-desktop) - var(--type-line-height-disp-sm-mobile)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-line-height-disp-sm-desktop)
  );
  letter-spacing: var(--fnt-letter-spacing-none);
}

/* ================ HEADLINE — Gilroy, fluid ================ */

.type-style-hl-prm-lg {
  font-family: var(--type-family-hl);
  font-weight: var(--type-weight-hl-prm-lg);
  font-style: var(--type-style-hl-default);
  font-size: clamp(
    var(--type-size-hl-lg-min),
    calc(var(--type-size-hl-lg-min) + (var(--type-size-hl-lg-max) - var(--type-size-hl-lg-min)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-size-hl-lg-max)
  );
  line-height: clamp(
    var(--type-line-height-hl-lg-mobile),
    calc(var(--type-line-height-hl-lg-mobile) + (var(--type-line-height-hl-lg-desktop) - var(--type-line-height-hl-lg-mobile)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-line-height-hl-lg-desktop)
  );
  letter-spacing: var(--fnt-letter-spacing-none);
}
.type-style-hl-prm-md {
  font-family: var(--type-family-hl);
  font-weight: var(--type-weight-hl-prm-md);
  font-style: var(--type-style-hl-default);
  font-size: clamp(
    var(--type-size-hl-md-min),
    calc(var(--type-size-hl-md-min) + (var(--type-size-hl-md-max) - var(--type-size-hl-md-min)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-size-hl-md-max)
  );
  line-height: clamp(
    var(--type-line-height-hl-md-mobile),
    calc(var(--type-line-height-hl-md-mobile) + (var(--type-line-height-hl-md-desktop) - var(--type-line-height-hl-md-mobile)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-line-height-hl-md-desktop)
  );
  letter-spacing: var(--fnt-letter-spacing-none);
}
.type-style-hl-prm-sm {
  font-family: var(--type-family-hl);
  font-weight: var(--type-weight-hl-prm-sm);
  font-style: var(--type-style-hl-default);
  font-size: clamp(
    var(--type-size-hl-sm-min),
    calc(var(--type-size-hl-sm-min) + (var(--type-size-hl-sm-max) - var(--type-size-hl-sm-min)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-size-hl-sm-max)
  );
  line-height: clamp(
    var(--type-line-height-hl-sm-mobile),
    calc(var(--type-line-height-hl-sm-mobile) + (var(--type-line-height-hl-sm-desktop) - var(--type-line-height-hl-sm-mobile)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-line-height-hl-sm-desktop)
  );
  letter-spacing: var(--fnt-letter-spacing-none);
}
.type-style-hl-sec-lg {
  font-family: var(--type-family-hl);
  font-weight: var(--type-weight-hl-sec-lg);
  font-style: var(--type-style-hl-default);
  font-size: clamp(
    var(--type-size-hl-lg-min),
    calc(var(--type-size-hl-lg-min) + (var(--type-size-hl-lg-max) - var(--type-size-hl-lg-min)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-size-hl-lg-max)
  );
  line-height: clamp(
    var(--type-line-height-hl-lg-mobile),
    calc(var(--type-line-height-hl-lg-mobile) + (var(--type-line-height-hl-lg-desktop) - var(--type-line-height-hl-lg-mobile)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-line-height-hl-lg-desktop)
  );
  letter-spacing: var(--fnt-letter-spacing-none);
}
.type-style-hl-sec-md {
  font-family: var(--type-family-hl);
  font-weight: var(--type-weight-hl-sec-md);
  font-style: var(--type-style-hl-default);
  font-size: clamp(
    var(--type-size-hl-md-min),
    calc(var(--type-size-hl-md-min) + (var(--type-size-hl-md-max) - var(--type-size-hl-md-min)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-size-hl-md-max)
  );
  line-height: clamp(
    var(--type-line-height-hl-md-mobile),
    calc(var(--type-line-height-hl-md-mobile) + (var(--type-line-height-hl-md-desktop) - var(--type-line-height-hl-md-mobile)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-line-height-hl-md-desktop)
  );
  letter-spacing: var(--fnt-letter-spacing-none);
}
.type-style-hl-sec-sm {
  font-family: var(--type-family-hl);
  font-weight: var(--type-weight-hl-sec-sm);
  font-style: var(--type-style-hl-default);
  font-size: clamp(
    var(--type-size-hl-sm-min),
    calc(var(--type-size-hl-sm-min) + (var(--type-size-hl-sm-max) - var(--type-size-hl-sm-min)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-size-hl-sm-max)
  );
  line-height: clamp(
    var(--type-line-height-hl-sm-mobile),
    calc(var(--type-line-height-hl-sm-mobile) + (var(--type-line-height-hl-sm-desktop) - var(--type-line-height-hl-sm-mobile)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-line-height-hl-sm-desktop)
  );
  letter-spacing: var(--fnt-letter-spacing-none);
}

/* ================ TITLE — Gilroy, fluid ================ */

.type-style-title-prm-lg,
.type-style-title-str-lg,
.type-style-title-lnk-lg {
  font-family: var(--type-family-title);
  font-style: var(--type-style-title-default);
  font-size: clamp(
    var(--type-size-title-lg-min),
    calc(var(--type-size-title-lg-min) + (var(--type-size-title-lg-max) - var(--type-size-title-lg-min)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-size-title-lg-max)
  );
  line-height: clamp(
    var(--type-line-height-title-lg-mobile),
    calc(var(--type-line-height-title-lg-mobile) + (var(--type-line-height-title-lg-desktop) - var(--type-line-height-title-lg-mobile)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-line-height-title-lg-desktop)
  );
  letter-spacing: var(--fnt-letter-spacing-none);
}
.type-style-title-prm-md,
.type-style-title-str-md,
.type-style-title-lnk-md {
  font-family: var(--type-family-title);
  font-style: var(--type-style-title-default);
  font-size: clamp(
    var(--type-size-title-md-min),
    calc(var(--type-size-title-md-min) + (var(--type-size-title-md-max) - var(--type-size-title-md-min)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-size-title-md-max)
  );
  line-height: clamp(
    var(--type-line-height-title-md-mobile),
    calc(var(--type-line-height-title-md-mobile) + (var(--type-line-height-title-md-desktop) - var(--type-line-height-title-md-mobile)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-line-height-title-md-desktop)
  );
  letter-spacing: var(--fnt-letter-spacing-none);
}
.type-style-title-prm-sm,
.type-style-title-str-sm,
.type-style-title-lnk-sm {
  font-family: var(--type-family-title);
  font-style: var(--type-style-title-default);
  font-size: clamp(
    var(--type-size-title-sm-min),
    calc(var(--type-size-title-sm-min) + (var(--type-size-title-sm-max) - var(--type-size-title-sm-min)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-size-title-sm-max)
  );
  line-height: clamp(
    var(--type-line-height-title-sm-mobile),
    calc(var(--type-line-height-title-sm-mobile) + (var(--type-line-height-title-sm-desktop) - var(--type-line-height-title-sm-mobile)) * ((100vw - 22.5rem) / 97.5rem)),
    var(--type-line-height-title-sm-desktop)
  );
  letter-spacing: var(--fnt-letter-spacing-none);
}
.type-style-title-prm-lg { font-weight: var(--type-weight-title-prm-lg); }
.type-style-title-prm-md { font-weight: var(--type-weight-title-prm-md); }
.type-style-title-prm-sm { font-weight: var(--type-weight-title-prm-sm); }
.type-style-title-str-lg { font-weight: var(--type-weight-title-str-lg); }
.type-style-title-str-md { font-weight: var(--type-weight-title-str-md); }
.type-style-title-str-sm { font-weight: var(--type-weight-title-str-sm); }
.type-style-title-lnk-lg { font-weight: var(--type-weight-title-lnk-lg); text-decoration: var(--type-link-title-lnk-lg); }
.type-style-title-lnk-md { font-weight: var(--type-weight-title-lnk-md); text-decoration: var(--type-link-title-lnk-md); }
.type-style-title-lnk-sm { font-weight: var(--type-weight-title-lnk-sm); text-decoration: var(--type-link-title-lnk-sm); }

/* ================ BODY — Inter, fixed ================ */

.type-style-body-prm-lg,
.type-style-body-str-lg,
.type-style-body-lnk-lg {
  font-family: var(--type-family-body);
  font-style: var(--type-style-body-default);
  font-size: var(--type-size-body-lg);
  line-height: var(--type-line-height-body-lg);
  letter-spacing: var(--fnt-letter-spacing-none);
}
.type-style-body-prm-md,
.type-style-body-str-md,
.type-style-body-lnk-md {
  font-family: var(--type-family-body);
  font-style: var(--type-style-body-default);
  font-size: var(--type-size-body-md);
  line-height: var(--type-line-height-body-md);
  letter-spacing: var(--fnt-letter-spacing-none);
}
.type-style-body-prm-sm,
.type-style-body-str-sm,
.type-style-body-lnk-sm {
  font-family: var(--type-family-body);
  font-style: var(--type-style-body-default);
  font-size: var(--type-size-body-sm);
  line-height: var(--type-line-height-body-sm);
  letter-spacing: var(--fnt-letter-spacing-none);
}
.type-style-body-prm-lg { font-weight: var(--type-weight-body-prm-lg); }
.type-style-body-prm-md { font-weight: var(--type-weight-body-prm-md); }
.type-style-body-prm-sm { font-weight: var(--type-weight-body-prm-sm); }
.type-style-body-str-lg { font-weight: var(--type-weight-body-str-lg); }
.type-style-body-str-md { font-weight: var(--type-weight-body-str-md); }
.type-style-body-str-sm { font-weight: var(--type-weight-body-str-sm); }
.type-style-body-lnk-lg { font-weight: var(--type-weight-body-lnk-lg); text-decoration: var(--type-link-body-lnk-lg); }
.type-style-body-lnk-md { font-weight: var(--type-weight-body-lnk-md); text-decoration: var(--type-link-body-lnk-md); }
.type-style-body-lnk-sm { font-weight: var(--type-weight-body-lnk-sm); text-decoration: var(--type-link-body-lnk-sm); }

/* ================ LABEL — Inter, fixed, letter-spacing small ================ */

.type-style-label-prm-lg,
.type-style-label-str-lg,
.type-style-label-lnk-lg {
  font-family: var(--type-family-label);
  font-style: var(--type-style-label-default);
  font-size: var(--type-size-label-lg);
  line-height: var(--type-line-height-label-lg);
  letter-spacing: var(--type-letter-spacing-label-lg);
}
.type-style-label-prm-md,
.type-style-label-str-md,
.type-style-label-lnk-md {
  font-family: var(--type-family-label);
  font-style: var(--type-style-label-default);
  font-size: var(--type-size-label-md);
  line-height: var(--type-line-height-label-md);
  letter-spacing: var(--type-letter-spacing-label-md);
}
.type-style-label-prm-sm,
.type-style-label-str-sm,
.type-style-label-lnk-sm {
  font-family: var(--type-family-label);
  font-style: var(--type-style-label-default);
  font-size: var(--type-size-label-sm);
  line-height: var(--type-line-height-label-sm);
  letter-spacing: var(--type-letter-spacing-label-sm);
}
.type-style-label-prm-lg { font-weight: var(--type-weight-label-prm-lg); }
.type-style-label-prm-md { font-weight: var(--type-weight-label-prm-md); }
.type-style-label-prm-sm { font-weight: var(--type-weight-label-prm-sm); }
.type-style-label-str-lg { font-weight: var(--type-weight-label-str-lg); }
.type-style-label-str-md { font-weight: var(--type-weight-label-str-md); }
.type-style-label-str-sm { font-weight: var(--type-weight-label-str-sm); }
.type-style-label-lnk-lg { font-weight: var(--type-weight-label-lnk-lg); text-decoration: var(--type-link-label-lnk-lg); }
.type-style-label-lnk-md { font-weight: var(--type-weight-label-lnk-md); text-decoration: var(--type-link-label-lnk-md); }
.type-style-label-lnk-sm { font-weight: var(--type-weight-label-lnk-sm); text-decoration: var(--type-link-label-lnk-sm); }

/* ================ CODE — Roboto Mono, fixed ================ */

.type-style-code-prm-lg {
  font-family: var(--type-family-code);
  font-weight: var(--type-weight-code-prm-lg);
  font-style: var(--type-style-code-default);
  font-size: var(--type-size-code-lg);
  line-height: var(--type-line-height-code-lg);
  letter-spacing: var(--type-letter-spacing-code-lg);
}
.type-style-code-prm-md {
  font-family: var(--type-family-code);
  font-weight: var(--type-weight-code-prm-md);
  font-style: var(--type-style-code-default);
  font-size: var(--type-size-code-md);
  line-height: var(--type-line-height-code-md);
  letter-spacing: var(--type-letter-spacing-code-md);
}
.type-style-code-prm-sm {
  font-family: var(--type-family-code);
  font-weight: var(--type-weight-code-prm-sm);
  font-style: var(--type-style-code-default);
  font-size: var(--type-size-code-sm);
  line-height: var(--type-line-height-code-sm);
  letter-spacing: var(--type-letter-spacing-code-sm);
}

/* ================ Link-varianter ================
   Futur har ingen separat link-färg — `lnk` ärver textfärg från kontext.
   Underline + weight (600) bär affordance.
   Text-decoration sätts via --type-link-*-token i utility-klasserna ovan. */

[class*="-lnk-"] { color: inherit; }