/* Shared design tokens — the ONE sanctioned cross-shadow-boundary styling
   channel (AGENT.md §1.1). Custom properties inherit into every shadow root, so
   components reference these with var(--…) instead of hardcoding hex. Change a
   token here and the whole UI follows. Palette: dark cab, amber CB-radio display. */

:root {
  color-scheme: dark;

  /* Surfaces & structure */
  --surface-0: #14161a; /* app background */
  --surface-1: #1b1e24; /* panels */
  --surface-2: #242830; /* raised cards */
  --border: #333944;
  --border-strong: #454c59;

  /* Text */
  --color-fg: #e6e9ef;
  --color-fg-muted: #9aa4b2;

  /* Fills / accents */
  --fill-accent: #f5a623; /* CB-radio amber */

  /* Semantic status */
  --color-danger: #ff5c5c;
  --color-danger-bg: #3a1e1e;
  --color-success: #4ade80;
  --color-warning: #f5c451;

  /* Road graphics (Night-highway theme, PLAN.md 8.1): sign and sky colors */
  --sign-green: #1e6a45;  /* guide signs, mile markers */
  --sign-white: #f3f3ee;
  --shield-blue: #1f4f9e; /* interstate shield */
  --shield-red: #c62a2f;
  --sky-top: #070a14;
  --sky-horizon: #4a2c3c; /* dusk glow behind the hills */
  --silhouette: #050608;
  --road: #101216;

  /* Radii */
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 12px;
}

/* The page shell owns only the app frame; components own everything inside their
   shadow roots. Keep global selectors OUT of components (AGENT.md §1.1). */
body {
  margin: 0;
  background: var(--surface-0);
  color: var(--color-fg);
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

a { color: var(--fill-accent); }

/* Page titles read as green interstate guide signs. */
main > h1 {
  display: inline-block; margin: 4px 0 12px; padding: 6px 16px; font-size: 22px;
  background: var(--sign-green); color: var(--sign-white); border-radius: var(--radius);
  box-shadow: inset 0 0 0 3px var(--sign-green), inset 0 0 0 5px var(--sign-white);
}

/* Section breaks are lane stripes. */
hr {
  border: 0; height: 3px; margin: 20px 0; opacity: .55;
  background: repeating-linear-gradient(90deg, var(--color-warning) 0 26px, transparent 26px 46px);
}