/* ============================================================
   AzimutSuite — Canonical breakpoints (single source of truth)
   ============================================================
   Three modes. Only three. Any @media in a module MUST use
   one of these exact values:

   ┌──────────┬────────────────────┬─────────────────────────────────────────────┐
   │ Mode     │ Range              │ Media query                                 │
   ├──────────┼────────────────────┼─────────────────────────────────────────────┤
   │ Mobile   │ < 768px            │ (max-width: 767.98px)                       │
   │ Tablet   │ [768, 1024) px     │ (min-width: 768px) and (max-width: 1023.98px)│
   │ Desktop  │ ≥ 1024px           │ (min-width: 1024px)                         │
   └──────────┴────────────────────┴─────────────────────────────────────────────┘

   Valid shortcuts (when only "X or larger" is needed):
     (min-width: 768px)   → Tablet and above
     (min-width: 1024px)  → Desktop only

   Hard rules:
     1. Do not use other values (576, 600, 720, 768 closed, 980, 1200, etc.).
     2. Preferred strategy: MOBILE-FIRST (base = mobile; tablet/desktop with
        min-width). Some legacy modules are still desktop-first; the migration
        is done in a visually-verified pass at 375/900/1440.
     3. Never use `max-width: 768px` (closed): it's ambiguous at the boundary.
        Always `767.98px`, or rewrite mobile-first with min-width.
     4. Do not add "intermediate" breakpoints (xl, 2xl, etc.). If a layout
        needs tweaks at 1440, use an internal container with max-width.

   Exposed custom properties (use from JS via getComputedStyle if needed):
   ============================================================ */
:root {
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  /* "Closed" upper bounds for max-width without overlap with the next min-width: */
  --bp-mobile-upper: 767.98px;
  --bp-tablet-upper: 1023.98px;
}