// Bootstrap Variable Overrides
// These variables override Bootstrap's default design tokens
// They are applied via CSS custom properties and utility classes

// Typography - Base Font Size
// This is the root font size that Bootstrap uses for all rem calculations
// Default: 1rem (typically 16px in browsers)
$font-size-base: 1.25rem;

// You can also set it to a specific pixel value:
// $font-size-base: 18px;  // Makes everything slightly larger

body {
  font-size: $font-size-base;
}

// Typography - Heading Font Sizes
// Customize heading sizes to establish visual hierarchy
$h1-font-size: 2rem;   // Default: 2.5rem
$h2-font-size: 1.75rem;     // Default: 2rem
$h3-font-size: 1.5rem;  // Default: 1.75rem
$h4-font-size: 1.25rem;   // Default: 1.5rem
$h5-font-size: 1rem;  // Default: 1.25rem
$h6-font-size: 1rem;     // Default: 1rem

// Apply heading sizes using CSS
h1 { font-size: $h1-font-size; }
h2 { font-size: $h2-font-size; }
h3 { font-size: $h3-font-size; }
h4 { font-size: $h4-font-size; }
h5 { font-size: $h5-font-size; }
h6 { font-size: $h6-font-size; }

// Link Colors
// Customize link colors for brand consistency
$link-color: #0b0089;           // Default Bootstrap: #0d6efd
$link-hover-color: #0052a3;     // Darker shade for hover state

a {
  color: $link-color;

  &:hover {
    color: $link-hover-color;
  }
}

// Spacing
// Uncomment and customize spacing scale if needed
// $spacer: 1rem;
// $spacers: (
//   0: 0,
//   1: $spacer * 0.25,
//   2: $spacer * 0.5,
//   3: $spacer,
//   4: $spacer * 1.5,
//   5: $spacer * 3,
// );