/* Breakpoint tokens — shared with JS via getComputedStyle().
   CSS media queries cannot use var(), so @media rules must repeat the
   literal value with a comment pointing back to the token. */

@layer tokens {
    :root {
        --bp-sm: 48rem;    /*  768 px — phone: below it, phone-only layout */
        --bp-md: 56.25rem; /*  900 px — below it, nav collapses into the hamburger drawer */
        --bp-lg: 75rem;    /* 1200 px — at or above it, the full top bar */
    }
}