/* ============================================================
   PSAP Wallboard — theme tokens
   Built on the desktop "ryz" teal-grey design system.
   Base hue ~195 (teal-blue grey). Inter type. Green accent #8abe55.

   Tokens are declared on :root so they cascade into every Lit
   component's shadow DOM (custom properties pierce shadow boundaries).
   The active theme is selected by a `theme-dark` / `theme-light` class
   placed on the wallboard stage element.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* discipline colours — consistent semantic meaning */
  --law: #3b7fc8;
  --fire: #c83b3b;
  --ems: #08952b;
  --rescue: #c87f3b;
  --other: #6c7b8b;

  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --radius: 10px;
  --radius-sm: 6px;

  /* Base "ryz" tokens read off document.documentElement by the MapLibre layer
     classes (src/map-layers/*) via getComputedStyle. These must live at :root
     (not on the themed .theme-* wrapper) or layer fill/line colors resolve to
     "" and MapLibre rejects the layer ("Error creating map layer"). Values
     mirror the desktop common-colors.css / ryz-dark.css. */
  --ryz-red: #ed1c24;
  --ryz-dark-green: #607f3b;
  --ryz-medium-grey: #b3b8bb;

  /* Call-state marker colors. Read at module-load time by
     @ryzyliant/edge-utilities/lit-svg (callStateToColor / callStateToTextColor)
     to color the call markers' icon and label. Must live at :root for the same
     getComputedStyle reason as above, otherwise the marker label renders solid
     black. Concrete values mirror desktop common-colors.css / ryz-dark.css. */
  --ryz-call-ringing: #bc4747;
  --ryz-call-abandoned: #235e9e; /* --ryz-medium-blue */
  --ryz-call-held: #fac544; /* --ryz-orange */
  --ryz-call-connected: #8abe55; /* --ryz-green */
  --ryz-call-connected-elsewhere: #374922; /* --ryz-darker-green */
  --ryz-call-ended: #4b585d; /* --ryz-ninety-grey */
  --ryz-light-foreground-color: hsl(195 15% 96%);
  --ryz-dark-background: hsl(195 14% 25%);
}

/* ---------- DARK (primary) ---------- */
.theme-dark {
  --bg: hsl(196 22% 8%);
  --bg-grad-1: hsl(196 24% 9%);
  --bg-grad-2: hsl(198 26% 6%);

  --panel: hsl(196 15% 14%);
  --panel-raised: hsl(196 14% 17%);
  --panel-inset: hsl(197 18% 11%);
  --panel-header: hsl(196 17% 12%);

  --border: hsla(195 14% 72% / 0.12);
  --border-strong: hsla(195 14% 78% / 0.22);

  --text: #e6e7e8;
  --text-2: #9aa6ab;
  --text-3: hsl(196 9% 46%);

  --green: #8abe55;
  --green-bright: #a3d96a;
  --amber: #fac544;
  --red: #f0464d;
  --red-deep: #ed1c24;
  --blue: #4f97e0;
  --teal: #3f9399;
  --violet: #a583bb;

  --good: var(--green);
  --warn: var(--amber);
  --crit: var(--red);

  --shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  --glow-warn: 0 0 0 1px hsla(43 95% 58% / 0.5), 0 0 30px -4px hsla(43 95% 58% / 0.35);
  --glow-crit: 0 0 0 1px hsla(2 84% 60% / 0.6), 0 0 34px -2px hsla(2 84% 60% / 0.4);

  --map-base: hsl(197 24% 10%);
  --map-line: hsla(195 18% 60% / 0.14);
  --map-line-major: hsla(195 20% 64% / 0.26);
  --map-water: hsl(199 30% 13%);
}

/* ---------- LIGHT ---------- */
.theme-light {
  --bg: hsl(195 16% 92%);
  --bg-grad-1: hsl(195 18% 94%);
  --bg-grad-2: hsl(195 14% 88%);

  --panel: #ffffff;
  --panel-raised: #ffffff;
  --panel-inset: hsl(195 16% 95%);
  --panel-header: hsl(195 16% 97%);

  --border: hsla(197 18% 30% / 0.14);
  --border-strong: hsla(197 18% 30% / 0.26);

  --text: #2a363b;
  --text-2: #5b6a70;
  --text-3: #8595a0;

  --green: #5f8f33;
  --green-bright: #6fa53d;
  --amber: #c8860a;
  --red: #d62b32;
  --red-deep: #c41e25;
  --blue: #2f6fb0;
  --teal: #2f7d83;
  --violet: #7d5a93;

  --good: var(--green);
  --warn: var(--amber);
  --crit: var(--red);

  --law: #2f6fb0;
  --fire: #c2403f;
  --ems: #1d8c3f;
  --rescue: #b9712f;
  --other: #6f7e8b;

  --shadow: 0 2px 12px rgba(40, 60, 70, 0.1);
  --glow-warn: 0 0 0 1px hsla(40 90% 42% / 0.45), 0 0 22px -6px hsla(40 90% 42% / 0.3);
  --glow-crit: 0 0 0 1px hsla(2 70% 50% / 0.5), 0 0 26px -4px hsla(2 70% 50% / 0.32);

  --map-base: hsl(196 22% 90%);
  --map-line: hsla(197 20% 35% / 0.16);
  --map-line-major: hsla(197 22% 32% / 0.28);
  --map-water: hsl(199 32% 84%);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #06090a;
  overflow: hidden;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
}