/* Responsive token tiers. Zeneon STMS is opened on phones (guardians, drivers),
   tablets (gate staff), laptops/desktops (school office, platform ops) and wall
   displays (transport-office TV). The :root values in the other token files are
   the LAPTOP/DESKTOP baseline; this file re-declares them per device class so a
   page written once adapts without any markup change.

   Device ladder — names used throughout the docs:
     xs   ≤479px    phone portrait
     sm   480–767   large phone / phone landscape
     md   768–1023  tablet portrait
     lg   1024–1439 tablet landscape, laptop        <- token baseline
     xl   1440–1919 desktop
     2xl  ≥1920     TV / wall dashboard (2–3m viewing distance)             */

:root{
/* Documentation tokens — @media cannot read custom properties, so these exist
   so app code, JS matchMedia calls and specs quote one source of truth. */
--bp-xs:360px;--bp-sm:480px;--bp-md:768px;--bp-lg:1024px;--bp-xl:1440px;--bp-2xl:1920px;
/* Fluid layout tokens. Use these instead of hard-coded page padding or column
   widths — they are what actually changes across the ladder. */
--page-pad:var(--space-5);--gutter:var(--space-5);--stack-gap:var(--space-4);
--grid-min:280px;            /* min column width for auto-fit card grids */
--nav-rail-w:64px;           /* sidebar collapsed to icons (md) */
--bottombar-h:60px;          /* sidebar becomes a bottom bar (xs/sm) */
--sheet-radius:var(--radius-xl);
}

/* md — tablet portrait: sidebar collapses to an icon rail, panels narrow. */
@media (max-width:1023px){:root{
--sidebar-w:var(--nav-rail-w);--panel-w:320px;
--page-pad:var(--space-4);--gutter:var(--space-4);--grid-min:240px;
--content-max:100%;
}}

/* sm — phone landscape / large phone: nav moves to the bottom bar, single column,
   type and controls step up because the device is held at arm's length. */
@media (max-width:767px){:root{
--topbar-h:52px;--panel-w:100%;
--page-pad:var(--space-3);--gutter:var(--space-3);--stack-gap:var(--space-3);--grid-min:100%;
--text-sm:14px;--text-base:15px;--text-md:17px;
--control-h-sm:32px;--control-h-md:40px;--control-h-lg:46px;
}}

/* xs — phone portrait: display sizes come down so headings do not wrap to 3 lines. */
@media (max-width:479px){:root{
--text-xl:20px;--text-2xl:24px;--text-3xl:30px;--text-display:34px;
--radius-lg:10px;--radius-xl:12px;
}}

/* Touch input, any size: no control below the 44px target. */
@media (pointer:coarse){:root{
--control-h-sm:36px;--control-h-md:44px;--control-h-lg:48px;
}}

/* 2xl — TV / wall dashboard: everything scales up for viewing distance. */
@media (min-width:1920px){:root{
--sidebar-w:280px;--topbar-h:64px;--panel-w:420px;--content-max:1760px;
--page-pad:var(--space-8);--gutter:var(--space-6);--grid-min:340px;
--text-2xs:12px;--text-xs:13px;--text-sm:14px;--text-base:15px;--text-md:17px;--text-lg:20px;--text-xl:24px;--text-2xl:32px;--text-3xl:42px;--text-display:56px;
--control-h-sm:32px;--control-h-md:38px;--control-h-lg:44px;
}}
@media (min-width:2560px){:root{
--content-max:2240px;--panel-w:480px;--sidebar-w:320px;
--text-base:17px;--text-md:19px;--text-lg:22px;--text-xl:27px;--text-2xl:36px;--text-3xl:48px;--text-display:64px;
--page-pad:var(--space-10);
}}

/* Explicit density override for screens that lie about their size — a 55" TV
   reporting 1080 CSS px, or a kiosk. Put data-density on <html>. */
[data-density="tv"]{
--text-base:17px;--text-md:19px;--text-lg:22px;--text-xl:27px;--text-2xl:36px;--text-3xl:48px;--text-display:64px;
--control-h-md:44px;--control-h-lg:52px;--page-pad:var(--space-8);--gutter:var(--space-6);
}
[data-density="compact"]{
--text-base:13px;--text-sm:12px;--control-h-sm:26px;--control-h-md:30px;--control-h-lg:36px;--page-pad:var(--space-3);--gutter:var(--space-3);
}