/**
 * Design tokens — Breakpoints
 *
 * Fixed in EC-STANDARDS.md: 0–639 (mobile, base) / 640–1023 (tablet) /
 * 1024–1439 (desktop) / 1440+ (wide).
 *
 * These custom properties are the true single source of truth for
 * anything that reads them at runtime — JavaScript via
 * getComputedStyle(), primarily.
 *
 * They cannot be the source of truth for @media (or @container) rules
 * written in CSS, and this was investigated deliberately rather than
 * assumed:
 *
 *   - CSS Custom Media Queries (@custom-media) is the feature that
 *     would actually solve this natively, but has no shipping support
 *     in Chrome, Firefox, Safari or Edge without a PostCSS build step
 *     — which would either break EC-STANDARDS.md's browser support
 *     matrix or reopen the already-decided "plain CSS, no build
 *     pipeline" methodology (EC-DESIGN-SYSTEM.md, Foundational
 *     Decisions).
 *   - Container queries (@container) do not help either: they solve a
 *     different problem (a component reacting to its own container's
 *     size, not the viewport) and share the exact same restriction —
 *     no var() inside the condition, native or not.
 *
 * Given that, a hand-written @media rule in component CSS must
 * hardcode these same three pixel values and stay in sync with this
 * file by convention, not tooling. The mitigation is scope, not
 * process: these three values are the only breakpoints ever used
 * anywhere in this codebase — no component invents its own — so
 * staying in sync is a small, bounded, mechanical copy rather than an
 * open-ended maintenance burden.
 */

:root {
	--ec-breakpoint-tablet: 640px;
	--ec-breakpoint-desktop: 1024px;
	--ec-breakpoint-wide: 1440px;
}