/* Dark theme — token layer only. Loads AFTER semantic.css and elevation.css and
   redefines every themed token once via light-dark(), so there is exactly one
   line per token and no duplicated dark block.

   Root contract (wire once, on <html>):
     no attribute                → follow the OS (default)
     data-theme="light"          → explicit light
     data-theme="dark"           → explicit dark
   color-scheme also themes native controls, scrollbars and form widgets.

   Elevation in dark: shadows vanish on a dark ground, so ELEVATION IS SURFACE
   LIGHTNESS — each raised layer steps one ink ramp step lighter
   (page ink-950 → card ink-900 → raised/menus ink-800). Shadows are kept only
   as grounding under truly floating layers (menus, dialogs, map panels) and are
   re-tinted to near-black so they read as occlusion, not glow. Borders carry
   more separating work: they become white-alpha mixes.

   Browsers without light-dark() (pre-2024) skip this whole file via @supports
   and keep the light theme from semantic.css — degradation, never breakage. */
@supports (color: light-dark(red, blue)) {
:root{color-scheme:light dark}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
:root{
/* Surfaces — the dark elevation ladder */
--surface-page:light-dark(var(--ink-100),var(--ink-950));
--surface-card:light-dark(var(--white),var(--ink-900));
--surface-sunken:light-dark(var(--ink-050),var(--ink-950));
--surface-raised:light-dark(var(--white),var(--ink-800));
--surface-inverse:light-dark(var(--ink-900),var(--ink-800));
--surface-inverse-soft:light-dark(var(--ink-800),var(--ink-700));
--surface-hover:light-dark(var(--ink-050),color-mix(in srgb,var(--white) 6%,transparent));
--surface-active:light-dark(var(--ink-150),color-mix(in srgb,var(--white) 10%,transparent));
--surface-selected:light-dark(var(--amber-050),color-mix(in srgb,var(--amber-400) 12%,transparent));
--surface-brand-soft:light-dark(var(--amber-100),color-mix(in srgb,var(--amber-400) 16%,transparent));
/* Text */
--text-primary:light-dark(var(--ink-900),var(--ink-100));
--text-secondary:light-dark(var(--ink-600),var(--ink-300));
--text-muted:light-dark(var(--ink-500),var(--ink-400));
--text-disabled:light-dark(var(--ink-400),var(--ink-600));
--text-inverse-muted:light-dark(var(--ink-300),var(--ink-400));
--text-link:light-dark(var(--teal-700),var(--teal-500));
--text-link-hover:light-dark(var(--teal-800),var(--teal-200));
--text-danger:light-dark(var(--red-600),var(--red-500));
/* Borders — white-alpha in dark; they do the separating that shadows did */
--border-subtle:light-dark(var(--ink-150),color-mix(in srgb,var(--white) 8%,transparent));
--border-default:light-dark(var(--ink-200),color-mix(in srgb,var(--white) 14%,transparent));
--border-strong-color:light-dark(var(--ink-300),color-mix(in srgb,var(--white) 22%,transparent));
--focus-ring:light-dark(var(--teal-600),var(--teal-500));
/* Actions — brand amber is unchanged (it carries on dark); hover LIGHTENS in dark */
--brand-hover:light-dark(var(--amber-500),var(--amber-300));
--brand-press:light-dark(var(--amber-600),var(--amber-500));
--action-neutral:light-dark(var(--ink-900),var(--ink-700));
--action-neutral-hover:light-dark(var(--ink-800),var(--ink-600));
--action-neutral-press:light-dark(var(--ink-950),var(--ink-800));
--action-danger:light-dark(var(--red-600),var(--red-500));
--action-danger-hover:light-dark(var(--red-700),var(--red-600));
/* Status — fg lifts to the light ramp step (AA on the tinted bg), bg becomes a
   translucent mix of the dot colour over whatever surface it sits on, dot stays
   the saturated mid step so the colour language reads identically in both themes */
--status-parked-fg:light-dark(var(--ink-700),var(--ink-300));
--status-parked-bg:light-dark(var(--ink-150),color-mix(in srgb,var(--ink-400) 20%,transparent));
--status-parked-dot:light-dark(var(--ink-500),var(--ink-400));
--status-boarding-fg:light-dark(var(--amber-700),var(--amber-300));
--status-boarding-bg:light-dark(var(--amber-100),color-mix(in srgb,var(--amber-500) 16%,transparent));
--status-boarding-dot:light-dark(var(--amber-500),var(--amber-400));
--status-enroute-fg:light-dark(var(--green-700),var(--green-200));
--status-enroute-bg:light-dark(var(--green-100),color-mix(in srgb,var(--green-500) 15%,transparent));
--status-arrived-fg:light-dark(var(--teal-700),var(--teal-200));
--status-arrived-bg:light-dark(var(--teal-100),color-mix(in srgb,var(--teal-500) 15%,transparent));
--status-delay-fg:light-dark(var(--orange-700),var(--orange-300));
--status-delay-bg:light-dark(var(--orange-100),color-mix(in srgb,var(--orange-600) 18%,transparent));
--status-emergency-fg:light-dark(var(--red-700),var(--red-200));
--status-emergency-bg:light-dark(var(--red-100),color-mix(in srgb,var(--red-500) 17%,transparent));
--status-emergency-dot:light-dark(var(--red-600),var(--red-500));
--status-emergency-bg-soft:light-dark(var(--red-050),color-mix(in srgb,var(--red-500) 9%,transparent));
--status-completed-fg:light-dark(var(--ink-600),var(--ink-400));
--status-completed-bg:light-dark(var(--ink-150),color-mix(in srgb,var(--ink-400) 14%,transparent));
--status-completed-dot:light-dark(var(--ink-400),var(--ink-500));
/* Payment & condition */
--fee-paid-fg:light-dark(var(--green-700),var(--green-200));
--fee-paid-bg:light-dark(var(--green-100),color-mix(in srgb,var(--green-500) 15%,transparent));
--fee-unpaid-fg:light-dark(var(--red-700),var(--red-200));
--fee-unpaid-bg:light-dark(var(--red-100),color-mix(in srgb,var(--red-500) 17%,transparent));
--fee-partial-fg:light-dark(var(--orange-700),var(--orange-300));
--fee-partial-bg:light-dark(var(--orange-100),color-mix(in srgb,var(--orange-600) 18%,transparent));
--fee-waived-fg:light-dark(var(--ink-600),var(--ink-400));
--fee-waived-bg:light-dark(var(--ink-150),color-mix(in srgb,var(--ink-400) 14%,transparent));
/* Scopes & info. Solid scope fills (org blue, platform violet) stay solid in
   dark — org steps to blue-600 so it separates from the near-black chrome. */
--scope-platform-bg:light-dark(var(--violet-100),color-mix(in srgb,var(--violet-600) 22%,transparent));
--scope-org:light-dark(var(--blue-700),var(--blue-600));
--scope-org-hover:light-dark(var(--blue-600),var(--blue-700));
--info-fg:light-dark(var(--blue-700),var(--blue-300));
--info-bg:light-dark(var(--blue-100),color-mix(in srgb,var(--blue-600) 18%,transparent));
--info-bg-soft:light-dark(var(--blue-050),color-mix(in srgb,var(--blue-600) 10%,transparent));
/* Map overlay tokens. The BASEMAP style itself (zeneon-basemap.json) is a
   separate deliverable — see the handoff README; these only theme the overlays. */
--map-route-line:light-dark(var(--teal-600),var(--teal-500));
--map-route-done:light-dark(var(--ink-400),var(--ink-600));
/* Elevation — shadows become near-black occlusion, never lighter than the ground */
--shadow-hairline:0 1px 0 0 light-dark(rgb(16 26 41 / .04),rgb(0 0 0 / .4));
--shadow-sm:0 1px 2px light-dark(rgb(16 26 41 / .06),rgb(0 0 0 / .4)),0 1px 1px light-dark(rgb(16 26 41 / .04),rgb(0 0 0 / .3));
--shadow-md:0 4px 10px -2px light-dark(rgb(16 26 41 / .10),rgb(0 0 0 / .5)),0 2px 4px -2px light-dark(rgb(16 26 41 / .06),rgb(0 0 0 / .4));
--shadow-lg:0 16px 32px -8px light-dark(rgb(16 26 41 / .18),rgb(0 0 0 / .6)),0 4px 8px -4px light-dark(rgb(16 26 41 / .08),rgb(0 0 0 / .45));
--shadow-map:0 2px 8px light-dark(rgb(10 16 27 / .28),rgb(0 0 0 / .55));
--glass-bg:light-dark(rgb(255 255 255 / .86),rgb(29 40 56 / .82));
--glass-border:light-dark(rgb(16 26 41 / .08),rgb(255 255 255 / .10));
}
}