/**
 * Font Size Override
 * 
 * Adjust --font-size-base to scale all font sizes globally.
 * Different breakpoints can have different font sizes.
 * 
 * IMPORTANT: Media queries must be ordered from largest to smallest
 * so that smaller breakpoints override larger ones.
 * 
 * Examples:
 *   14px = ~17% larger
 *   16px = ~33% larger  
 *   18px = ~50% larger
 */

/* Default (desktop) font size */
:root {
  --font-size-base: 14px; /* Change from default 12px */
}

/* Tablet breakpoint (max-width: 1200px) */
@media (max-width: 1200px) {
  :root {
    --font-size-base: 16px !important;
  }
}

/* Mobile breakpoint (max-width: 768px) */
@media (max-width: 768px) {
  :root {
    --font-size-base: 12px !important;
  }
}

/* Small mobile breakpoint (max-width: 480px) - MUST come after 768px */
/* Using both max-width and min-width to ensure it only applies to small screens */
@media screen and (max-width: 480px) {
  :root {
    --font-size-base: 12px !important;
  }
}