/* ============================================================
   BREAKPOINTS — Pavel Presnov Design System
   Named viewport widths. CSS custom properties can't be used inside
   @media queries, so these are the canonical NUMBERS to hard-code in
   media queries — kept here as the single source of truth and exposed
   as variables for JS (matchMedia) use.
   ============================================================ */

:root {
  --bp-xs: 480px; /* @kind other */   /* large phone */
  --bp-sm: 640px; /* @kind other */   /* small tablet */
  --bp-md: 768px; /* @kind other */   /* tablet */
  --bp-lg: 1024px; /* @kind other */  /* small laptop — primary app breakpoint */
  --bp-xl: 1280px; /* @kind other */  /* desktop */
  --bp-2xl: 1536px; /* @kind other */ /* large desktop */
}

/*
  Reference in media queries (copy the literal):
    @media (max-width: 1024px) { ... }   // below --bp-lg
    @media (min-width: 768px)  { ... }   // at/above --bp-md
*/