@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter_24pt-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

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

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

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter_24pt-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter_24pt-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ===== Base Font Family ===== */
  --font-family-primary: "Inter", sans-serif;

  /* ===== Others fonts ===== */
  --font-family-os: 'Open Sans', sans-serif;
  --font-family-fa: 'FontAwesome';

  /* ===== Font Weights ===== */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ===== Font Sizes ===== */
  --font-size-h1-xl: 56px;
  --font-size-h1: 36px;
  --font-size-h2: 28px;
  --font-size-h3: 20px;
  --font-size-body: 16px;
  --font-size-small: 14px;
  --font-size-extra-small: 12px;
  --font-size-button: 16px;
  --font-size-link: 16px;

  /* ===== Line Heights ===== */
  --line-height-tight: 1.1;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;

  /* ===== Text Styles ===== */
  --text-h1: var(--font-weight-bold) var(--font-size-h1) / var(--line-height-tight) var(--font-family-primary);
  --text-h2: var(--font-weight-semibold) var(--font-size-h2) / var(--line-height-tight) var(--font-family-primary);
  --text-h3: var(--font-weight-medium) var(--font-size-h3) / var(--line-height-normal) var(--font-family-primary);
  --text-body: var(--font-weight-regular) var(--font-size-body) / var(--line-height-relaxed) var(--font-family-primary);
  --text-small: var(--font-weight-regular) var(--font-size-small) / var(--line-height-relaxed) var(--font-family-primary);
  --text-extra-small: var(--font-weight-regular) var(--font-size-extra-small) / var(--line-height-normal) var(--font-family-primary);
  --text-button: var(--font-weight-medium) var(--font-size-button) / var(--line-height-normal) var(--font-family-primary);
  --text-button-bold: var(--font-weight-bold) var(--font-size-button) / var(--line-height-normal) var(--font-family-primary);
  --text-link: var(--font-weight-regular) var(--font-size-link) / var(--line-height-normal) var(--font-family-primary);

  /* ===== Notes, metadata, supporting text ===== */
  .text-italic {
    font: var(--text-small);
    font-style: italic; 
  }
}