@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400..600;1,14..32,400..600&display=swap');

// Font family
$unnnic-font-family-primary: 'Inter', sans-serif;
$unnnic-font-family-secondary: $unnnic-font-family-primary;

// Font weight
$unnnic-font-weight-black: 900;
$unnnic-font-weight-light: 300;

// Font size
$unnnic-font-size-body-sm: 0.5 * 16px;
$unnnic-font-size-body-md: 0.75 * 16px;
$unnnic-font-size-body-gt: 0.875 * 16px;
$unnnic-font-size-body-lg: 1 * 16px;

$unnnic-font-size-title-sm: 1.25 * 16px;
$unnnic-font-size-title-md: 1.5 * 16px;
$unnnic-font-size-title-lg: 2 * 16px;

$unnnic-font-size-h4: 2.5 * 16px;
$unnnic-font-size-h3: 3 * 16px;
$unnnic-font-size-h2: 3.5 * 16px;
$unnnic-font-size-h1: 4.5 * 16px;

// Line height
// Add this to font size when using
$unnnic-line-height-small: 0.25 * 16px;
$unnnic-line-height-medium: 0.5 * 16px;
$unnnic-line-height-md: $unnnic-line-height-medium;
$unnnic-line-height-large: 1 * 16px;

// New typography tokens
$unnnic-text-display-1: 1.5 * 16px;    // 24px
$unnnic-text-display-2: 1.25 * 16px;   // 20px
$unnnic-text-display-3: 1 * 16px;      // 16px
$unnnic-text-display-4: 1 * 16px;      // 16px
$unnnic-text-body: 0.875 * 16px;       // 14px
$unnnic-text-emphasis: 0.875 * 16px;   // 14px
$unnnic-text-action: 0.875 * 16px;     // 14px
$unnnic-text-caption-1: 0.75 * 16px;   // 12px
$unnnic-text-caption-2: 0.75 * 16px;   // 12px

// Typography line heights
$unnnic-line-height-display-1: 2 * 16px;     // 32px
$unnnic-line-height-display-2: 1.6875 * 16px; // 27px
$unnnic-line-height-display-3: 1.375 * 16px;  // 22px
$unnnic-line-height-display-4: 1.375 * 16px;  // 22px
$unnnic-line-height-body: 1.3125 * 16px;      // 21px
$unnnic-line-height-emphasis: 1.3125 * 16px;  // 21px
$unnnic-line-height-action: 1.3125 * 16px;    // 21px
$unnnic-line-height-caption-1: 1.125 * 16px;  // 18px
$unnnic-line-height-caption-2: 1.125 * 16px;  // 18px

.unnnic-font {
  font-weight: 400;
  font-family: $unnnic-font-family-primary;

  $font-sizes:
    "body-sm" $unnnic-font-size-body-sm,
    "body-md" $unnnic-font-size-body-md,
    "body-gt" $unnnic-font-size-body-gt,
    "body-lg" $unnnic-font-size-body-lg,

    "title-sm" $unnnic-font-size-title-sm,
    "title-md" $unnnic-font-size-title-md,
    "title-lg" $unnnic-font-size-title-lg,

    "h4" $unnnic-font-size-h4,
    "h3" $unnnic-font-size-h3,
    "h2" $unnnic-font-size-h2,
    "h1" $unnnic-font-size-h1;

  $font-weights:
    "black" $unnnic-font-weight-black,
    "bold" 700,
    "light" $unnnic-font-weight-light;

  &.secondary {
    font-family: $unnnic-font-family-secondary;
  }

  @each $name, $size in $font-sizes {
    &.#{$name} {
      font-size: $size;
      line-height: $size + $unnnic-line-height-md;
    }
  }

  @each $name, $weight in $font-weights {
    &.#{$name} {
      font-weight: $weight;
    }
  }
}


.u {
  &.font {
    font-weight: 400;
    font-family: $unnnic-font-family-primary;

    $font-sizes:
      "body-sm" $unnnic-font-size-body-sm,
      "body-md" $unnnic-font-size-body-md,
      "body-gt" $unnnic-font-size-body-gt,
      "body-lg" $unnnic-font-size-body-lg,

      "title-sm" $unnnic-font-size-title-sm,
      "title-md" $unnnic-font-size-title-md,
      "title-lg" $unnnic-font-size-title-lg,

      "h4" $unnnic-font-size-h4,
      "h3" $unnnic-font-size-h3,
      "h2" $unnnic-font-size-h2,
      "h1" $unnnic-font-size-h1;

    $font-weights:
      "black" $unnnic-font-weight-black,
      "bold" 700,
      "light" $unnnic-font-weight-light;

    &.secondary {
      font-family: $unnnic-font-family-secondary;
    }

    @each $name, $size in $font-sizes {
      &.#{$name} {
        font-size: $size;
        line-height: $size + $unnnic-line-height-md;
      }
    }

    @each $name, $weight in $font-weights {
      &.#{$name} {
        font-weight: $weight;
      }
    }
  }
}