/* ═══════════════════════════════════════════════════════════════════════
   BREAKPOINTS — canonical responsive scale (audit C1)
   ───────────────────────────────────────────────────────────────────────
   The audit found ~29 different magic-number media-query breakpoints across
   ~134 CSS files (320/375/380/460/480/520/540/576/600/640/720/767/768/820/
   900/980/991/992/1024/1080/1100/1180/1200/1280/1400/1440/1566/1920).

   This file defines the CANONICAL scale every stylesheet should snap to, and
   exposes the values as tokens for the contexts where CSS variables DO work:
   container queries, min()/max()/clamp(), and JS (getComputedStyle).

   IMPORTANT: CSS variables cannot be used inside `@media (max-width: …)`
   conditions — that's a language limitation, not an oversight. Parameterising
   the media queries themselves needs a build step (PostCSS `@custom-media`
   or a Sass migration). Until then, hand-written media queries should use the
   canonical px values below (see the migration map) so behaviour is uniform.

   Canonical scale (mobile-first, matches Bootstrap's grid tiers the app
   already ships, plus a wide/TV tier):
     xs   <  480   small phones
     sm   >= 480   large phones
     md   >= 768   tablets (portrait)
     lg   >= 1024  tablets (landscape) / small laptops
     xl   >= 1280  desktops
     xxl  >= 1536  large desktops
     tv   >= 1920  TV / ultra-wide (content caps here — see wide-layout.css)

   Migration map (legacy magic number → canonical):
     375,380,460        → 480 (xs/sm boundary)
     520,540,576,600,640→ 480 or 768 (pick by intent; 576 = Bootstrap sm)
     720,767,820,900    → 768 (md)
     980,991,992        → 1024 (lg)   [991/992 = Bootstrap lg, keep 992 if grid-coupled]
     1080,1100,1180,1200→ 1280 (xl)
     1400,1440,1566     → 1536 (xxl)
     1920               → 1920 (tv)

   Rollout is staged: normalise per-component CSS to these values in batches,
   re-running `responsive-audit/capture.mjs` after each batch to confirm no
   layout regressions (the canonical values shift some breakpoints by up to
   ~50px, which can change when a rule applies).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --bp-xs: 480px;
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
    --bp-xxl: 1536px;
    --bp-tv: 1920px;
}