/**
 * platform-breakpoints.css
 *
 * Single-source documentation of the platform shell's responsive bands, as CSS
 * custom properties. These mirror `PLATFORM_LAYOUT_BANDS` in `platform-layout.js`
 * exactly — retune a threshold in ONE of the two places and update the other;
 * there is no way for CSS to read a JS constant (and no way for `@media` to read
 * a CSS custom property either — media query conditions cannot use `var()` in any
 * browser), so these stay in sync by convention, not by reference.
 *
 * These values are ALSO passed to Tailwind's `theme.extend.screens` in
 * `PlatformLayoutAsset::registerAssetFiles()`, so `tablet:`, `tablet-wide:`,
 * `desktop-narrow:`, `desktop:` and `tv:` utility variants (e.g. `tv:flex`) apply
 * at the same thresholds as the `platform-layout-*` / `platform-navbar-*` body
 * classes computed by `platformApp()`. Tailwind's own default breakpoints
 * (`sm`/`md`/`lg`/`xl`/`2xl`) are additive, not replaced — existing usages (e.g.
 * `md:grid-cols-2` in SellerProfileFormWidget) keep working unchanged.
 *
 * Most platform CSS should key off the body classes (`.platform-layout-tablet`,
 * `.platform-navbar-side-floating`, …) rather than raw `@media` queries — see
 * PlatformNavMenuWidget/assets/platform-nav-menu.css for the established
 * pattern — since those classes are the single source of truth computed from
 * `window.innerWidth`, not a second, independently-maintained set of thresholds.
 * These custom properties exist for the rare case where a value needs to be
 * read at runtime (JS `getComputedStyle`) or referenced in a comment/tooltip,
 * not as a replacement for that pattern.
 */
:root {
    --platform-bp-tablet:         768px;   /* mobile/tablet split — bottom nav vs. side rail */
    --platform-bp-tablet-wide:    900px;   /* tablet flat → tablet floating */
    --platform-bp-desktop-narrow: 1130px;  /* tablet floating → desktop floating */
    --platform-bp-desktop:        1330px;  /* desktop floating → desktop flat */
    --platform-bp-tv:             1920px;  /* desktop flat → tv */
}


@import "tailwindcss";

@theme {
    /* Change existing breakpoints using plain CSS variables */
    --breakpoint-md: var(--platform-bp-tablet-wide);
    --breakpoint-lg: var(--platform-bp-desktop);
    --breakpoint-xl: var(--platform-bp-tv);
}