/* Typography System */

:root {
  /* Font Families */
  --font-primary: "Noto Sans", system-ui, sans-serif;

  /* Font Sizes */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.75rem; /* 14px */
  --text-base: 0.875rem; /* 14px */
  --text-lg: 1rem; /* 16px */
  --text-xl: 1.125rem; /* 20px */
  --text-2xl: 1.25rem; /* 24px */
  --text-3xl: 1.5rem; /* 30px */
  --text-4xl: 1.875rem; /* 36px */

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

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
}

/* Base Styles */
body {
  font-family:
    var(--font-primary) system-ui,
    sans-serif;
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
}

/* Semantic Text Styles */
%heading-1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

%heading-2 {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

%heading-3 {
  font-family:
    var(--font-primary) system-ui,
    sans-serif;
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
}

%heading-4 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
}

%heading-5 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
}

%body-large {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

%body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.body-small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

%body-small-variant {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  font-weight: var(--font-semibold);
}

%caption {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

%label {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  font-weight: var(--font-regular);
}

%label-bold {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  font-weight: var(--font-semibold);
}
