/* ============================================================
   DESIGN TOKENS — BREAKPOINTS
   Reference values for the responsive grid.

   IMPORTANT: CSS @media queries CANNOT consume CSS variables
   for their comparison value (e.g. @media (max-width:
   var(--breakpoint-md)) is invalid CSS). These tokens are
   provided for:
     1. Documentation of the canonical breakpoints.
     2. Use inside JS / CSS calc() / clamp() where supported.
   Actual @media rules in component CSS must keep literal
   pixel values that match the tokens below.
   ============================================================ */

:root {
    --breakpoint-xs:   480px;   /* phones (single column) */
    --breakpoint-sm:   640px;   /* large phones */
    --breakpoint-md:   768px;   /* tablets (nav collapses) */
    --breakpoint-lg:   992px;   /* small desktop (3-col grid) */
    --breakpoint-xl:   1024px;  /* desktop */
    --breakpoint-2xl:  1280px;  /* large desktop */
}