lmdWeb/html/assets/scss/base/_typography.scss

// ==========================================================================
// TYPOGRAPHY
// ==========================================================================

@use 'sass:map';
@use '../abstracts/variables' as v;
@use '../abstracts/mixins' as mix;
@use 'sass:color';

// Font face declarations for locally hosted Poppins font
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

// Font face declarations for locally hosted Inter font - Optimized version
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/static/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/static/Inter_18pt-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/static/Inter_18pt-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/static/Inter_18pt-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

// Base typography
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: map.get(v.$font-weights, 'regular');
  font-size: map.get(v.$font-sizes, 'base');
  line-height: 1.6;
  color: var(--color-text-secondary);
}

// Headings
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: map.get(v.$font-weights, 'bold');
  color: var(--color-text-primary);
  margin-bottom: map.get(v.$spacers, 3);
  line-height: 1.2;
}

h1 {
  font-size: map.get(v.$font-sizes, '2xl');

  @include mix.respond-to-min('md') {
    font-size: map.get(v.$font-sizes, '3xl');
  }
}

h2 {
  font-size: map.get(v.$font-sizes, '3xl');

  @include mix.respond-to-max('sm') {
    font-size: map.get(v.$font-sizes, 'lg');
  }
}

h3 {
  font-size: map.get(v.$font-sizes, '2xl');
  font-weight: map.get(v.$font-weights, 'semibold');
}

h4 {
  font-size: map.get(v.$font-sizes, 'xl');
  font-weight: map.get(v.$font-weights, 'semibold');
}

h5 {
  font-size: map.get(v.$font-sizes, 'lg');
  font-weight: map.get(v.$font-weights, 'medium');
}

h6 {
  font-size: map.get(v.$font-sizes, 'base');
  font-weight: map.get(v.$font-weights, 'medium');
}

// Paragraphs
p {
  margin-bottom: map.get(v.$spacers, 3);

  &:last-child {
    margin-bottom: 0;
  }
}

// Links
a {
  color: v.$primary;
  text-decoration: none;
  transition: v.$transition-base;

  &:hover {
    color: color.scale(v.$primary, $lightness: -10%);
  }
}

// Text utilities
.text-primary {
  color: v.$primary !important;
}

.text-gradient {
  background: v.$primary-gradient;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.font-light {
  font-weight: map.get(v.$font-weights, 'light') !important;
}

.font-normal {
  font-weight: map.get(v.$font-weights, 'regular') !important;
}

.font-medium {
  font-weight: map.get(v.$font-weights, 'medium') !important;
}

.font-semibold {
  font-weight: map.get(v.$font-weights, 'semibold') !important;
}

.font-bold {
  font-weight: map.get(v.$font-weights, 'bold') !important;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

// Heading custom classes
.heading-lg {
  font-size: map.get(v.$font-sizes, '4xl');
  font-weight: map.get(v.$font-weights, 'bold');
  margin-bottom: map.get(v.$spacers, 4);
}

.heading-md {
  font-size: map.get(v.$font-sizes, '3xl');
  font-weight: map.get(v.$font-weights, 'semibold');
  margin-bottom: map.get(v.$spacers, 3);
}

.subtitle {
  font-size: map.get(v.$font-sizes, 'lg');
  color: v.$gray;
  margin-bottom: map.get(v.$spacers, 4);
}

// Font family utilities
.font-heading {
  font-family: 'Space Grotesk', sans-serif !important;
}

.font-body {
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.font-mono {
  font-family: 'Fira Code', monospace !important;
}

// Font size utility classes
.font-size-xs {
  font-size: map.get(v.$font-sizes, 'xs') !important;
}

.font-size-sm {
  font-size: map.get(v.$font-sizes, 'sm') !important;
}

.font-size-base {
  font-size: map.get(v.$font-sizes, 'base') !important;
}

.font-size-lg {
  font-size: map.get(v.$font-sizes, 'lg') !important;
}

.font-size-xl {
  font-size: map.get(v.$font-sizes, 'xl') !important;
}

.font-size-2xl {
  font-size: map.get(v.$font-sizes, '2xl') !important;
}

.font-size-3xl {
  font-size: map.get(v.$font-sizes, '3xl') !important;
}

.font-size-4xl {
  font-size: map.get(v.$font-sizes, '4xl') !important;
}

.font-size-5xl {
  font-size: map.get(v.$font-sizes, '5xl') !important;
}