/**
 * Breakpoints – single source of truth for responsive breakpoint values.
 *
 * Use these values in media queries and in calc() / JavaScript.
 * Aligned with Bootstrap 5: sm, md, lg, xl, xxl.
 *
 * Canonical breakpoints (min-width for "mobile-first"):
 *   xs / mobile:  < 576px
 *   sm:           576px  (Bootstrap .98 used for max-width: 575.98px)
 *   md:           768px  (Bootstrap .98 used for max-width: 767.98px)
 *   lg:           992px  (Bootstrap .98 used for max-width: 991.98px)
 *   xl:           1200px (Bootstrap .98 used for max-width: 1199.98px)
 *   xxl:          1400px
 *   xxxl:         1600px  (extra-large desktops / ultra-wide)
 *
 * Common "mobile" cutoff for hiding desktop-only content: 768px (md).
 * Common "tablet" cutoff: 992px (lg).
 */

:root {
    /* Breakpoint values (for calc(), JS, or reference in comments) – media queries cannot use var() */
    --bp-sm-ph: 430px;
    --bp-sm: 530px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-xxl: 1400px;
    --bp-xxxl: 1600px;
    /* Max-width variants to avoid overlap when using max-width media queries */
    --bp-sm-ph-max: 429.98px;
    --bp-sm-max: 529.98px;
    --bp-md-max: 767.98px;
    --bp-lg-max: 991.98px;
    --bp-xl-max: 1199.98px;
    --bp-xxl-max: 1399.98px;
}