@use "sass:list";

// Utility classes for opt-in typography variants. Mirror PzText variants and
// expose --pz-typography-* CSS vars consumed by the typography mixins. Any
// component whose typography mixin uses a prefix will pick these up via the
// fallback chain without specificity conflicts.

$pz-typography-variants: (
  "h1-bold": (
    44,
    700,
  ),
  "h1-regular": (
    44,
    400,
  ),
  "h2-bold": (
    32,
    700,
  ),
  "h3-bold": (
    24,
    700,
  ),
  "h3-regular": (
    24,
    400,
  ),
  "h4-regular": (
    18,
    400,
  ),
  "h4-semibold": (
    18,
    600,
  ),
  "h4-bold": (
    18,
    700,
  ),
  "subtitle": (
    16,
    600,
  ),
  "body-regular": (
    14,
    400,
  ),
  "body-semibold": (
    14,
    600,
  ),
  "body-bold": (
    14,
    700,
  ),
  "capitalized": (
    14,
    400,
  ),
  "hint": (
    14,
    400,
  ),
  "line-through": (
    14,
    400,
  ),
  "small-regular": (
    12,
    400,
  ),
  "small-semibold": (
    12,
    600,
  ),
  "small-bold": (
    12,
    700,
  ),
  "link": (
    14,
    400,
  ),
  "document": (
    14,
    400,
  ),
);

.pz-typography {
  @each $name, $tokens in $pz-typography-variants {
    $size: list.nth($tokens, 1);
    $weight: list.nth($tokens, 2);

    &--#{$name} {
      --pz-typography-font-size: var(--pz-font-size-#{$size});
      --pz-typography-font-weight: #{$weight};
      --pz-typography-line-height: 1.5;
    }
  }

  &--centered {
    text-align: center;
  }

  &--capitalized {
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  &--hint {
    color: var(--pz-color-text-secondary);
  }

  &--line-through {
    text-decoration: line-through;
  }

  &--link {
    color: var(--pz-color-text-link);
    text-decoration: underline;
    cursor: pointer;
  }
}
