@use "sass:math";
@use "_colors";
@use "helpers";

$base-size: 15.5; // 1rem in px (for typical browsers).

@function px-to-rem($px) {
  @return math.div(helpers.unitless($px), $base-size) * 1rem;
}

@function rem-to-px($rem) {
  @return helpers.unitless($rem) * $base-size * 1px;
}

// "Brand" font: for headings, large buttons, large numbers
$font-brand: "Karla", sans-serif;
$weight-brand-normal: 500;
$weight-brand-bold: 700;

// "Display" font: for everything else
$font-display: "Inter", sans-serif;
$weight-display-light: 400;
$weight-display-normal: 500;
$weight-display-bold: 600;

// Monospace, for account numbers and stuff
$font-monospace: "Source Code Pro", monospace;

@mixin _font-style($family, $size, $line-height, $weight: null) {
  font-family: $family;
  font-size: px-to-rem($size);
  line-height: px-to-rem($line-height);
  font-weight: $weight;
}

@mixin fontHugeNumber {
  @include _font-style($font-brand, 47, 38, $weight-brand-bold);
}

@mixin fontH1 {
  letter-spacing: -0.03em;
  @include _font-style($font-brand, 30, 33, $weight-brand-bold);
}

@mixin fontH2 {
  letter-spacing: -0.02em;
  @include _font-style($font-brand, 26, 28, $weight-brand-bold);
}

@mixin fontH3 {
  letter-spacing: -0.02em;
  @include _font-style($font-brand, 23, 24, $weight-brand-bold);
}

@mixin fontH4 {
  @include _font-style($font-display, 20, 23, $weight-display-normal);
}

@mixin fontH5 {
  @include _font-style($font-display, 17, 20, $weight-display-bold);
}

@mixin fontH6 {
  color: colors.$color-on-surface-variant;
}

@mixin font-body {
  @include _font-style($font-display, $base-size, 22, $weight-display-normal);
  letter-spacing: -0.009em;
}

@mixin font-small {
  @include _font-style($font-display, 15, 20, $weight-display-normal);
}

@mixin font-smaller {
  @include _font-style($font-display, 14, 18, $weight-display-normal);
}

@mixin font-smallest {
  @include _font-style($font-display, 13, 16, $weight-display-normal);
}