@use 'sass:map';
@use '../settings';
@use '../settings/typography';
@use '../tools' as *;

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); /* Inter font */

body,
:root {
  @if (settings.$typography) {
    --sd-sys-typography-font-family: #{typography.$font-family-base} !important;


    h1, h2, h3, h4, h5, h6, label {
      --color: rgb(var(--v-theme-gray-900));
    }

    h1, h2, h3, h4, h5, h6, p, a, label {
      color: var(--color);
      margin: 0;
    }

    h1 {
      @include typography(display-xs, semi-bold);
      --color: var(--sd-sys-color-on-surface-emphasis-variant);
    }

    h2 {
      @include typography(text-xl, semi-bold);
      --color: var(--sd-sys-color-on-surface-emphasis-variant);
    }

    h3 {
      @include typography(text-lg, semi-bold);
      --color: var(--sd-sys-color-on-surface-emphasis-variant);
    }

    h4 {
      @include typography(text-md, semi-bold);
      --color: var(--sd-sys-color-on-surface-emphasis);
    }

    h5 {
      @include typography(text-sm, semi-bold);
      --color: var(--sd-sys-color-on-surface-emphasis);
    }

    h6 {
      @include typography(text-xs, semi-bold);
      --color: var(--sd-sys-color-on-surface-emphasis);
    }

    p {
      @include typography(text-sm, regular);
      --color: var(--sd-sys-color-on-surface);
    }

    a {
      @include typography(text-sm, medium);
      --color: var(--sd-sys-color-on-surface-accent-emphasis);
      cursor: pointer;
    }

    label {
      @include typography(text-sm, medium);
      --color: var(--sd-sys-color-on-surface-emphasis);
    }

    @each $scale, $type in typography.$type-scales {
      $font-size: map.get($type, size);
      $line-height: map.get($type, line-height);
      $letter-spacing: map.get($type, letter-spacing);

      @each $weight, $size in typography.$font-weights {
        .#{$scale}-#{$weight} {
          font-size: $font-size;
          font-weight: $size;
          line-height: $line-height;
          letter-spacing: $letter-spacing;
        }
      }
    }
  }
}