/*
  tokens.css
  -----------
  RoadSense AI design tokens. Every color, spacing and radius value used
  anywhere in the app should trace back to a variable defined here.

  Palette: an offline "ops room" -- near-black hull, signal-green for live
  telemetry, data-blue for informational accents, alert-red reserved
  strictly for hazards/incidents. Numbers and identifiers render in a
  monospace face throughout the app, the one consistent "instrument
  readout" signature that ties every screen together.
*/

:root {
  /* ---- Surface --------------------------------------------------- */
  --bg-base: #000000;
  --bg-raised: #121212;
  --bg-panel: #181818;
  --bg-panel-soft: rgba(24, 24, 24, 0.55);
  --bg-elevated: #282828;
  --border-hairline: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* ---- Text -------------------------------------------------------- */
  --text-primary: #ffffff;
  --text-secondary: #b3b3b3;
  --text-muted: #727272;
  --text-disabled: #535353;

  /* ---- Brand / signal colors --------------------------------------- */
  --signal-green: #1db954;
  --signal-green-dim: rgba(29, 185, 84, 0.14);
  --signal-green-strong: #1ed760;
  --data-blue: #3b9eff;
  --data-blue-dim: rgba(59, 158, 255, 0.14);
  --alert-red: #ff4757;
  --alert-red-dim: rgba(255, 71, 87, 0.14);
  --alert-amber: #ffb020;
  --alert-amber-dim: rgba(255, 176, 32, 0.14);
  --violet: #8b7bff;
  --violet-dim: rgba(139, 123, 255, 0.14);

  /* ---- Gradients ----------------------------------------------------- */
  --gradient-signal: linear-gradient(135deg, #1db954 0%, #179443 100%);
  --gradient-blue: linear-gradient(135deg, #3b9eff 0%, #1f5fbf 100%);
  --gradient-hull: radial-gradient(circle at 20% -10%, rgba(29, 185, 84, 0.08), transparent 50%),
    radial-gradient(circle at 90% 10%, rgba(59, 158, 255, 0.07), transparent 45%);

  /* ---- Type ------------------------------------------------------------ */
  --font-display: "Nunito", sans-serif;
  --font-body: "Nunito", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --fs-xs: 0.6875rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.875rem;
  --fs-2xl: 2.5rem;

  /* ---- Spacing scale ------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* ---- Radius & elevation --------------------------------------------- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 12px 32px -16px rgba(0, 0, 0, 0.8);
  --shadow-glow-green: 0 0 0 1px rgba(29, 185, 84, 0.3), 0 0 24px -4px rgba(29, 185, 84, 0.35);
  --shadow-glow-blue: 0 0 0 1px rgba(59, 158, 255, 0.3), 0 0 24px -4px rgba(59, 158, 255, 0.35);

  /* ---- Layout --------------------------------------------------------- */
  --sidebar-w: 240px;
  --topbar-h: 64px;
  --transition-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}