/*
 * Wajang — Standard Breakpoints
 * ══════════════════════════════════════════════════════════════════════
 *
 * Use these values in all new CSS. Do not introduce new arbitrary widths.
 * When refactoring old CSS, migrate toward these values.
 *
 *  Name   Value    Use for
 *  ─────  ───────  ─────────────────────────────────────────────────────
 *  xs     480px    Narrow phones (portrait)
 *  sm     640px    Large phones, small tablets (portrait)
 *  md     768px    Tablets (portrait) — was inconsistently 760 or 768
 *  lg     900px    Tablets (landscape), small desktops — dominant value
 *  xl    1080px    Wide desktops — consolidates 980/1050/1100 variants
 *
 * Pattern:
 *   @media (max-width: 900px) { ... }   ← "below lg"
 *   @media (min-width: 901px) { ... }   ← "lg and above"
 *
 * Min-width companions are +1px to avoid overlap:
 *   max-width: 480px  →  min-width: 481px
 *   max-width: 640px  →  min-width: 641px
 *   max-width: 768px  →  min-width: 769px  (existing — keep as is)
 *   max-width: 900px  →  min-width: 901px  (existing — keep as is)
 *   max-width:1080px  →  min-width:1081px
 *
 * Complex modules (visual-planning, media-review) use additional
 * intermediate breakpoints for layout-specific needs — that is fine.
 * New intermediate values should be documented inline with a comment.
 *
 * ══════════════════════════════════════════════════════════════════════
 */

/*
 * CSS custom properties for JavaScript usage only.
 * (CSS @media queries cannot reference custom properties;
 *  these are exposed for JS matchMedia calls only.)
 */
:root {
  --bp-xs:   480;
  --bp-sm:   640;
  --bp-md:   768;
  --bp-lg:   900;
  --bp-xl:  1080;
}