/* ============================================================================
   Scholarion Typography Styles
   ============================================================================
   
   Purpose: Defines consistent typography system across the Scholarion portal
   using CSS custom properties (design tokens) for maintainability.
   
   Design Tokens Used:
   - --scholarion-font-sans: Primary sans-serif font family
   - --scholarion-font-mono: Monospace font for code
   - --scholarion-fs-*: Font size scale (100-700)
   - --scholarion-lh-*: Line height values (default, tight)
   
   ========================================================================= */

/* -----------------------------------------------------------------------------
   Base Styles
   -------------------------------------------------------------------------- */

/**
 * Root font size
 * Sets base 16px for consistent rem calculations across the application
 */
html {
  font-size: 16px;
}

/**
 * Body typography defaults
 * Applies base font family, size, line-height and enables font smoothing
 * for better text rendering across browsers and operating systems
 */
body {
  font-family: var(--scholarion-font-sans) !important;
  font-size: var(--scholarion-fs-200) !important;
  line-height: var(--scholarion-lh-default) !important;
  /* Enable font smoothing for clearer text rendering on modern displays */
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* -----------------------------------------------------------------------------
   Heading Styles
   -------------------------------------------------------------------------- */

/**
 * Heading level 1 (h1, .h1)
 * Largest heading - typically used for page titles and primary headers
 * Uses tight line-height for better visual hierarchy
 */
h1,
.h1 {
  font-family: var(--scholarion-font-sans) !important;
  font-size: var(--scholarion-fs-700) !important;
  line-height: var(--scholarion-lh-tight) !important;
}

/**
 * Heading level 2 (h2, .h2)
 * Secondary heading - used for major section titles
 */
h2,
.h2 {
  font-family: var(--scholarion-font-sans) !important;
  font-size: var(--scholarion-fs-600) !important;
  line-height: var(--scholarion-lh-tight) !important;
}

/**
 * Heading level 3 (h3, .h3)
 * Tertiary heading - used for subsection titles
 */
h3,
.h3 {
  font-family: var(--scholarion-font-sans) !important;
  font-size: var(--scholarion-fs-500) !important;
  line-height: var(--scholarion-lh-tight) !important;
}

/**
 * Heading level 4 (h4, .h4)
 * Quaternary heading - used for minor section titles
 */
h4,
.h4 {
  font-family: var(--scholarion-font-sans) !important;
  font-size: var(--scholarion-fs-400) !important;
  line-height: var(--scholarion-lh-tight) !important;
}

/* -----------------------------------------------------------------------------
   Utility Text Styles
   -------------------------------------------------------------------------- */

/**
 * Small text and muted content
 * Applied to helper text, form descriptions, and secondary information
 * Consolidated for consistency across Bootstrap utility classes
 */
.small,
.text-muted,
.form-text {
  font-size: var(--scholarion-fs-100) !important;
}

/* -----------------------------------------------------------------------------
   Code and Monospace Typography
   -------------------------------------------------------------------------- */

/**
 * Code and preformatted text
 * Uses monospace font family for code blocks, inline code, and technical content
 * Slightly reduced size (95%) for better readability within body text
 */
code,
pre,
.code {
  font-family: var(--scholarion-font-mono) !important;
  font-size: .95em !important;
}

/* ============================================================================
   End Scholarion Typography Styles
   ========================================================================= */