/* ==========================================================================
   Responsive Breakpoints - Centralized Design Tokens
   Standardized breakpoint system for consistent responsive behavior.
   ========================================================================== */

/*
  Breakpoint Scale (Mobile-First):
  - xs:  420px  (very small phones)
  - sm:  640px  (small landscape, large phones)
  - md:  768px  (tablets)
  - lg:  1024px (small laptops)
  - xl:  1220px (desktops — general components)
  - 2xl: 1400px (large screens)

  Header Exception Breakpoints (navigation requires finer granularity):
  - 1280px — first desktop compression
  - 1150px — tight desktop, smaller search bar (original 1160px)
  - 1100px — hide brand subtitle
  - 1040px — shrink brand icon, reduce nav font sizes
  - 1600px — ultra-wide screens

  Mapping from legacy values:
  - 320px, 360px, 480px → xs (420px)
  - 540px, 600px → sm (640px)
  - 720px → md (768px)
  - 900px, 980px → lg (1024px)
  - 1080px, 1160px → xl (1220px)
  - 1280px → header exception / 2xl (1400px)
*/

/* ==========================================================================
   Utility Breakpoint Mixins (via Custom Properties)
   These custom properties document the standardized values.
   Media queries themselves must use raw values (CSS spec limitation).
   ========================================================================== */

:root {
    --breakpoint-xs: 420px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1220px;
    --breakpoint-2xl: 1400px;

    /* Header exception breakpoints */
    --breakpoint-header-wide: 1600px;
    --breakpoint-header-desktop: 1280px;
    --breakpoint-header-laptop: 1100px;
    --breakpoint-header-tablet-approach: 1040px;
}