/*
  Generated consumable layer — DERIVED from tokens/semantic.json, which is derived
  from tokens/raw.json. Do not hand-edit a value here without updating semantic.json
  first; this file exists so Leptos views and style.css have zero-cost CSS custom
  properties to consume without a build step reading JSON at runtime.

  Mount point: import this file before style.css. Theme is selected by a single
  `data-theme="dark" | "light"` attribute on <html> — see theme-switcher/.

  v2 ("instrument cluster") — the flat, zero-radius, monochrome grid was replaced
  by a layered system: a cool-neutral surface ladder, an electric-blue brand ramp
  with a blue→cyan signature gradient, real elevation, and a radius scale. Token
  NAMES are unchanged so all ~140 downstream call sites keep working; only values
  moved, plus a set of additive tokens (shadow ladder, radius scale, gradients,
  focus ring, glass) that the new components consume.

  Typography was later reduced from three families to two: the Domine serif and
  DM Sans were both replaced by Inter, so display and body now share one face and
  the size ramp gained the 14px/15px rungs the old scale was missing. Token names
  are unchanged; --text-md, --tracking-wider and --font-weight-body-semibold are
  additive.
*/

:root {
  /* ---- Typography ---- */
  /* One sans for every piece of text, one mono for every number. Display and
     body deliberately share a face; the two token names are kept so a future
     display face can be swapped in without touching a single call site. */
  --font-family-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --font-weight-display-medium: 500;
  --font-weight-display-semibold: 600;
  --font-weight-display-bold: 700;
  --font-weight-body-regular: 400;
  --font-weight-body-medium: 500;
  --font-weight-body-semibold: 600;
  --font-weight-body-bold: 700;
  --font-weight-mono-regular: 400;
  --font-weight-mono-medium: 500;
  --font-weight-mono-bold: 700;

  /* Ramp is dense at the bottom because this is a data-dense UI: most text in
     the app lives between 11px and 15px, and the old 13px->16px gap is what
     pushed ~40 declarations off the scale into hand-picked rem values. */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Inter sets tighter than the serif it replaced, so display sizes take more
     negative tracking and uppercase micro-labels take less positive tracking.
     --tracking-wider preserves the old 0.08em for the few labels that want air. */
  --tracking-tighter: -0.022em;
  --tracking-tight: -0.014em;
  --tracking-normal: 0em;
  --tracking-wide: 0.045em;
  --tracking-wider: 0.08em;

  /* ---- Space (4px unit) ---- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --space-row-y: var(--space-1);
  --space-row-x: var(--space-3);
  --space-card-pad: var(--space-5);
  --space-panel-gap: var(--space-3);
  --space-section-y-mobile: var(--space-8);
  --space-section-y-desktop: var(--space-12);
  --space-gutter-mobile: var(--space-4);
  --space-gutter-desktop: var(--space-8);
  --space-stack-tight: var(--space-1);
  --space-stack-loose: var(--space-4);

  /* ---- Radius ----
     v2 replaces the 0px "sharp grid" signature with a soft, consistent scale.
     Surfaces are the product's dominant shape, so they carry the signature radius. */
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-surface: 16px;  /* cards, panels, modals — the style signature */
  --radius-control: 11px;  /* buttons, inputs, selects */
  --radius-chip: 999px;    /* badges, tags, filter chips, status pills */
  --radius-avatar: 9999px;
  --radius-signature: 16px;

  /* ---- Motion ---- */
  --motion-duration-instant: 0ms;
  --motion-duration-fast: 140ms;
  --motion-duration-medium: 240ms;
  --motion-duration-entry: 420ms;
  --motion-duration-slow: 620ms;
  --motion-duration-bump: 360ms;
  --motion-duration-ambient-pulse: 2400ms;
  --motion-duration-ambient-shimmer: 1500ms;
  --motion-duration-stagger-step: 45ms;

  --motion-ease-linear: linear;
  --motion-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --motion-ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --motion-ease-spring-bump: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-ease-spring-soft: cubic-bezier(0.22, 1.2, 0.36, 1);
  --motion-ease-ambient: cubic-bezier(0.4, 0, 0.6, 1);

  /* ---- Breakpoints ----
     CSS cannot read custom properties inside @media conditions — these exist as the
     single source of truth for authors/JS (matchMedia) to reference; @media rules in
     style.css must hardcode the same px values. Keep both in sync by hand. */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Color: dark is this product's primary mode (see foundations/08-dark-mode-strategy.md)
     — :root carries the dark values as a pre-hydration-safe fallback. The inline boot
     script (theme-switcher/inline-boot.html) sets [data-theme] before first paint, so
     this fallback is a safety net, not the steady state for light-mode users. */
  --color-bg-canvas: #08090d;
  --color-bg-surface: #0f1117;
  --color-bg-surface-raised: #161922;
  --color-bg-surface-overlay: #1d212c;
  --color-bg-inset: #0b0d12;

  --color-fg-ink: #f1f4f9;
  --color-fg-body: #c2c9d6;
  --color-fg-muted: #838da3;
  --color-fg-faint: #5d6579;
  --color-fg-on-accent: #04070f;

  --color-border-default: rgba(160, 178, 214, 0.10);
  --color-border-strong: rgba(160, 178, 214, 0.20);
  --color-border-accent: rgba(90, 154, 255, 0.42);

  --color-accent: #5a9aff;
  --color-accent-hover: #79b0ff;
  --color-accent-active: #3f83ee;
  --color-accent-soft: rgba(90, 154, 255, 0.14);
  --color-accent-softer: rgba(90, 154, 255, 0.07);
  --color-accent-2: #37d9e8;

  --color-success: #3ddc84;
  --color-success-subtle: rgba(61, 220, 132, 0.14);
  --color-warning: #ffb545;
  --color-warning-subtle: rgba(255, 181, 69, 0.14);
  --color-danger: #ff6b63;
  --color-danger-subtle: rgba(255, 107, 99, 0.14);
  --color-info: #5a9aff;
  --color-info-subtle: rgba(90, 154, 255, 0.14);

  --color-overlay-scrim: rgba(4, 6, 12, 0.72);

  /* ---- Elevation ladder ----
     Dark mode leans on shadow + a hairline top highlight; light mode leans on
     soft, wide, low-opacity shadows. Both are defined per-theme below. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.34), 0 8px 24px -10px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.38), 0 20px 44px -16px rgba(0, 0, 0, 0.62);
  --shadow-4: 0 8px 24px rgba(0, 0, 0, 0.44), 0 36px 80px -24px rgba(0, 0, 0, 0.7);
  --shadow-overlay: 0 0 0 1px rgba(160, 178, 214, 0.12), 0 24px 64px -18px rgba(0, 0, 0, 0.78);
  --shadow-accent-glow: 0 6px 22px -8px rgba(90, 154, 255, 0.6);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* ---- Signature gradients ---- */
  --gradient-brand: linear-gradient(135deg, #5a9aff 0%, #37d9e8 100%);
  --gradient-brand-vivid: linear-gradient(120deg, #4c7dff 0%, #5a9aff 45%, #37d9e8 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(90, 154, 255, 0.18), rgba(55, 217, 232, 0.06));
  --gradient-surface: linear-gradient(170deg, rgba(160, 178, 214, 0.055), rgba(160, 178, 214, 0));
  --gradient-hairline: linear-gradient(90deg, transparent, rgba(160, 178, 214, 0.28), transparent);
  --gradient-sheen: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.16) 50%, transparent 80%);

  /* ---- Focus ring (one ring, everywhere) ---- */
  --ring-width: 3px;
  --ring-color: rgba(90, 154, 255, 0.45);
  --ring: 0 0 0 var(--ring-width) var(--ring-color);
  --ring-offset: 0 0 0 1px var(--color-bg-canvas);

  /* ---- Glass ---- */
  --glass-blur: 18px;
  --glass-bg: rgba(15, 17, 23, 0.72);
  --glass-border: rgba(160, 178, 214, 0.12);

  --color-chart-series-1: #5a9aff;
  --color-chart-series-2: #ffb545;
  --color-chart-series-3: #3ddc84;
  --color-chart-series-4: #b98cff;
  --color-chart-series-5: #37d9e8;
  --color-chart-series-6: #ff7ac0;

  --color-map-route: #5a9aff;
  --color-map-route-active: #37d9e8;
  --color-map-marker-start: #3ddc84;
  --color-map-marker-end: #ff6b63;
  --color-map-marker-poi: #838da3;
}

[data-theme='dark'] {
  --color-bg-canvas: #08090d;
  --color-bg-surface: #0f1117;
  --color-bg-surface-raised: #161922;
  --color-bg-surface-overlay: #1d212c;
  --color-bg-inset: #0b0d12;

  --color-fg-ink: #f1f4f9;
  --color-fg-body: #c2c9d6;
  --color-fg-muted: #838da3;
  --color-fg-faint: #5d6579;
  --color-fg-on-accent: #04070f;

  --color-border-default: rgba(160, 178, 214, 0.10);
  --color-border-strong: rgba(160, 178, 214, 0.20);
  --color-border-accent: rgba(90, 154, 255, 0.42);

  --color-accent: #5a9aff;
  --color-accent-hover: #79b0ff;
  --color-accent-active: #3f83ee;
  --color-accent-soft: rgba(90, 154, 255, 0.14);
  --color-accent-softer: rgba(90, 154, 255, 0.07);
  --color-accent-2: #37d9e8;

  --color-success: #3ddc84;
  --color-success-subtle: rgba(61, 220, 132, 0.14);
  --color-warning: #ffb545;
  --color-warning-subtle: rgba(255, 181, 69, 0.14);
  --color-danger: #ff6b63;
  --color-danger-subtle: rgba(255, 107, 99, 0.14);
  --color-info: #5a9aff;
  --color-info-subtle: rgba(90, 154, 255, 0.14);

  --color-overlay-scrim: rgba(4, 6, 12, 0.72);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.34), 0 8px 24px -10px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.38), 0 20px 44px -16px rgba(0, 0, 0, 0.62);
  --shadow-4: 0 8px 24px rgba(0, 0, 0, 0.44), 0 36px 80px -24px rgba(0, 0, 0, 0.7);
  --shadow-overlay: 0 0 0 1px rgba(160, 178, 214, 0.12), 0 24px 64px -18px rgba(0, 0, 0, 0.78);
  --shadow-accent-glow: 0 6px 22px -8px rgba(90, 154, 255, 0.6);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  --gradient-surface: linear-gradient(170deg, rgba(160, 178, 214, 0.055), rgba(160, 178, 214, 0));
  --gradient-hairline: linear-gradient(90deg, transparent, rgba(160, 178, 214, 0.28), transparent);
  --gradient-sheen: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.16) 50%, transparent 80%);

  --glass-bg: rgba(15, 17, 23, 0.72);
  --glass-border: rgba(160, 178, 214, 0.12);

  --color-chart-series-1: #5a9aff;
  --color-chart-series-2: #ffb545;
  --color-chart-series-3: #3ddc84;
  --color-chart-series-4: #b98cff;
  --color-chart-series-5: #37d9e8;
  --color-chart-series-6: #ff7ac0;

  --color-map-route: #5a9aff;
  --color-map-route-active: #37d9e8;
  --color-map-marker-start: #3ddc84;
  --color-map-marker-end: #ff6b63;
  --color-map-marker-poi: #838da3;

  color-scheme: dark;
}

[data-theme='light'] {
  --color-bg-canvas: #f5f6fa;
  --color-bg-surface: #ffffff;
  --color-bg-surface-raised: #ffffff;
  --color-bg-surface-overlay: #ffffff;
  --color-bg-inset: #eef0f6;

  --color-fg-ink: #0d1220;
  --color-fg-body: #3d4759;
  --color-fg-muted: #646e83;
  --color-fg-faint: #8b93a5;
  --color-fg-on-accent: #ffffff;

  --color-border-default: rgba(13, 18, 32, 0.09);
  --color-border-strong: rgba(13, 18, 32, 0.18);
  --color-border-accent: rgba(37, 99, 235, 0.40);

  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-active: #1e40af;
  --color-accent-soft: rgba(37, 99, 235, 0.10);
  --color-accent-softer: rgba(37, 99, 235, 0.05);
  --color-accent-2: #0891b2;

  --color-success: #148f4b;
  --color-success-subtle: rgba(20, 143, 75, 0.10);
  --color-warning: #a35a00;
  --color-warning-subtle: rgba(163, 90, 0, 0.10);
  --color-danger: #d02a35;
  --color-danger-subtle: rgba(208, 42, 53, 0.10);
  --color-info: #2563eb;
  --color-info-subtle: rgba(37, 99, 235, 0.10);

  --color-overlay-scrim: rgba(13, 18, 32, 0.44);

  --shadow-1: 0 1px 2px rgba(13, 18, 32, 0.06);
  --shadow-2: 0 1px 3px rgba(13, 18, 32, 0.07), 0 8px 20px -10px rgba(13, 18, 32, 0.14);
  --shadow-3: 0 2px 6px rgba(13, 18, 32, 0.07), 0 18px 38px -14px rgba(13, 18, 32, 0.18);
  --shadow-4: 0 6px 16px rgba(13, 18, 32, 0.09), 0 32px 70px -22px rgba(13, 18, 32, 0.22);
  --shadow-overlay: 0 0 0 1px rgba(13, 18, 32, 0.07), 0 24px 60px -18px rgba(13, 18, 32, 0.24);
  --shadow-accent-glow: 0 6px 22px -8px rgba(37, 99, 235, 0.45);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  --gradient-brand: linear-gradient(135deg, #2563eb 0%, #0891b2 100%);
  --gradient-brand-vivid: linear-gradient(120deg, #1d4ed8 0%, #2563eb 45%, #0891b2 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(8, 145, 178, 0.05));
  --gradient-surface: linear-gradient(170deg, rgba(13, 18, 32, 0.022), rgba(13, 18, 32, 0));
  --gradient-hairline: linear-gradient(90deg, transparent, rgba(13, 18, 32, 0.16), transparent);
  --gradient-sheen: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);

  --ring-color: rgba(37, 99, 235, 0.35);

  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(13, 18, 32, 0.08);

  --color-chart-series-1: #2563eb;
  --color-chart-series-2: #a35a00;
  --color-chart-series-3: #148f4b;
  --color-chart-series-4: #7c3aed;
  --color-chart-series-5: #0891b2;
  --color-chart-series-6: #be2f7c;

  --color-map-route: #2563eb;
  --color-map-route-active: #0891b2;
  --color-map-marker-start: #148f4b;
  --color-map-marker-end: #d02a35;
  --color-map-marker-poi: #646e83;

  color-scheme: light;
}

/* prefers-reduced-motion: collapse all durations to instant, keep opacity-only fades.
   Individual components still decide whether a transition should exist at all —
   this only removes the *time* an already-present transition takes. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 0ms;
    --motion-duration-medium: 0ms;
    --motion-duration-entry: 0ms;
    --motion-duration-slow: 0ms;
    --motion-duration-bump: 0ms;
    --motion-duration-ambient-pulse: 0ms;
    --motion-duration-ambient-shimmer: 0ms;
    --motion-duration-stagger-step: 0ms;
  }
}