// Typography mixins based on Figma Design System "Prozorro"
// All styles use line-height: 1.5 (150%) as defined in the design system.
// Desktop sizes: 44 / 32 / 24 / 18 / 16 / 14 / 12 px
// Mobile  sizes: 24 / 20 / 18 / 16 / 14 / 12 px (headings scale down)
// Usage:
//   @include typography-h1-bold;                 -> fixed design-system value
//   @include typography-body-regular("pz-link"); -> overridable via CSS vars
// When a $prefix is passed, font-size / font-weight / line-height are emitted as
// `var(--<prefix>-font-size, <token>)` etc. Consumers can then override the
// component's typography without fighting scoped-style specificity:
//   <PzLink style="--pz-link-font-size: 16px; --pz-link-font-weight: 600" />
// Passing no $prefix preserves the exact fixed output (back-compatible).

// ─── Private emitter ────────────────────────────────────────────────────────

@mixin typography-emit($size, $weight, $line: 1.5, $prefix: null) {
  @if $prefix {
    hyphens: auto;
    overflow-wrap: break-word;
    font-size: var(--#{$prefix}-font-size, var(--pz-typography-font-size, #{$size}));
    font-weight: var(--#{$prefix}-font-weight, var(--pz-typography-font-weight, #{$weight}));
    line-height: var(--#{$prefix}-line-height, var(--pz-typography-line-height, #{$line}));
  } @else {
    hyphens: auto;
    overflow-wrap: break-word;
    font-size: $size;
    font-weight: $weight;
    line-height: $line;
  }
}

// ─── Desktop ──────────────────────────────────────────────────────────────────

@mixin typography-h1-bold($prefix: null) {
  @include typography-emit(var(--pz-font-size-44), 700, 1.5, $prefix);
}

@mixin typography-h1-regular($prefix: null) {
  @include typography-emit(var(--pz-font-size-44), 400, 1.5, $prefix);
}

@mixin typography-h2-bold($prefix: null) {
  @include typography-emit(var(--pz-font-size-32), 700, 1.5, $prefix);
}

@mixin typography-h3-bold($prefix: null) {
  @include typography-emit(var(--pz-font-size-24), 700, 1.5, $prefix);
}

@mixin typography-h3-regular($prefix: null) {
  @include typography-emit(var(--pz-font-size-24), 400, 1.5, $prefix);
}

@mixin typography-h4-regular($prefix: null) {
  @include typography-emit(var(--pz-font-size-18), 400, 1.5, $prefix);
}

@mixin typography-h4-semibold($prefix: null) {
  @include typography-emit(var(--pz-font-size-18), 600, 1.5, $prefix);
}

@mixin typography-h4-bold($prefix: null) {
  @include typography-emit(var(--pz-font-size-18), 700, 1.5, $prefix);
}

@mixin typography-subtitle($prefix: null) {
  @include typography-emit(var(--pz-font-size-16), 600, 1.5, $prefix);
}

@mixin typography-body-regular($prefix: null) {
  @include typography-emit(var(--pz-font-size-14), 400, 1.5, $prefix);
}

@mixin typography-body-semibold($prefix: null) {
  @include typography-emit(var(--pz-font-size-14), 600, 1.5, $prefix);
}

@mixin typography-body-bold($prefix: null) {
  @include typography-emit(var(--pz-font-size-14), 700, 1.5, $prefix);
}

@mixin typography-capitalized($prefix: null) {
  @include typography-emit(var(--pz-font-size-14), 400, 1.5, $prefix);

  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@mixin typography-hint($prefix: null) {
  @include typography-emit(var(--pz-font-size-14), 400, 1.5, $prefix);

  color: var(--pz-color-text-secondary);
}

@mixin typography-line-through($prefix: null) {
  @include typography-emit(var(--pz-font-size-14), 400, 1.5, $prefix);

  text-decoration: line-through;
}

@mixin typography-small-regular($prefix: null) {
  @include typography-emit(var(--pz-font-size-12), 400, 1.5, $prefix);
}

@mixin typography-small-semibold($prefix: null) {
  @include typography-emit(var(--pz-font-size-12), 600, 1.5, $prefix);
}

@mixin typography-small-bold($prefix: null) {
  @include typography-emit(var(--pz-font-size-12), 700, 1.5, $prefix);
}

@mixin typography-link($prefix: null) {
  @include typography-emit(var(--pz-font-size-14), 400, 1.5, $prefix);

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

  &:hover {
    color: var(--pz-color-text-link-hover);
  }
}

@mixin typography-document($prefix: null) {
  @include typography-emit(var(--pz-font-size-14), 400, 1.5, $prefix);
}

// ─── Mobile overrides (headings only) ─────────────────────────────────────────
// Apply these inside a responsive breakpoint mixin, e.g.:
// @include max-media-devices("sm") { @include typography-h1-bold-mobile; }

@mixin typography-h1-bold-mobile($prefix: null) {
  @include typography-emit(var(--pz-font-size-24), 700, 1.5, $prefix);
}

@mixin typography-h1-regular-mobile($prefix: null) {
  @include typography-emit(var(--pz-font-size-24), 400, 1.5, $prefix);
}

@mixin typography-h2-bold-mobile($prefix: null) {
  @include typography-emit(var(--pz-font-size-20), 700, 1.5, $prefix);
}

@mixin typography-h2-regular-mobile($prefix: null) {
  @include typography-emit(var(--pz-font-size-20), 400, 1.5, $prefix);
}

@mixin typography-h3-bold-mobile($prefix: null) {
  @include typography-emit(var(--pz-font-size-18), 700, 1.5, $prefix);
}

@mixin typography-h3-semibold-mobile($prefix: null) {
  @include typography-emit(var(--pz-font-size-18), 600, 1.5, $prefix);
}

@mixin typography-h3-regular-mobile($prefix: null) {
  @include typography-emit(var(--pz-font-size-18), 400, 1.5, $prefix);
}

@mixin typography-h4-bold-mobile($prefix: null) {
  @include typography-emit(var(--pz-font-size-16), 700, 1.5, $prefix);
}

@mixin typography-h4-semibold-mobile($prefix: null) {
  @include typography-emit(var(--pz-font-size-16), 600, 1.5, $prefix);
}

@mixin typography-h4-regular-mobile($prefix: null) {
  @include typography-emit(var(--pz-font-size-16), 400, 1.5, $prefix);
}
