/* Design tokens for the infrastructure map (Concept 4).
 *
 * Defined once here so component rules never hard-code a colour. Values are the
 * approved contract's, not approximations of it.
 *
 * The map commits deliberately to a single dark visual world — this is a wall
 * display for machine state, and a light variant would fight the whole point of
 * status colour on a near-black ground. Hence `color-scheme: dark` rather than a
 * light/dark token pair.
 */
:root {
  color-scheme: dark;

  --color-canvas: #00050f;
  --color-shell: #020711;
  --color-sidebar: #00060f;
  --color-surface-1: #050e17;
  --color-surface-2: #091521;
  --color-surface-3: #0b1724;
  --color-surface-selected: #0d2029;
  --color-surface-hover: #102231;

  --color-border-subtle: #182634;
  --color-border: #2c323e;
  --color-divider: #1b2a38;

  --color-text: #f4f7fa;
  --color-text-secondary: #aeb8c3;
  --color-text-muted: #71808f;
  --color-text-disabled: #53616e;

  --color-accent: #47ddbc;
  --color-accent-bright: #53e5cf;
  --color-accent-soft: rgba(71, 221, 188, 0.12);
  --color-link: #46c8ff;

  --color-healthy: #55bc5e;
  --color-attention: #fa9d19;
  --color-danger: #ef3a31;
  --color-info: #39bdf8;
  --color-offline: #8b98a5;

  --chart-cpu: #47ddbc;
  --chart-gpu: #fa9d19;
  --chart-memory: #64d26e;
  --chart-temperature: #ff6b5f;
  --chart-disk: #46c8ff;
  --chart-network-in: #9b8cff;
  --chart-network-out: #ed8ed2;
  --chart-grid: #1a2a38;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-panel: 0 12px 32px rgba(0, 0, 0, 0.28);
  --focus-ring: 0 0 0 2px #00050f, 0 0 0 4px #53e5cf;

  /* Native-first stack. The panel ships no webfont, and a runtime request to a
   * font CDN would be blocked by the panel's own CSP anyway. */
  --font-ui: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
             sans-serif;

  /* Type scale from the contract. Numerals in metrics, IDs, timestamps and axes
   * use tabular figures; labels and navigation never use monospace. */
  --type-page: 650 20px/28px var(--font-ui);
  --type-inspector: 650 18px/24px var(--font-ui);
  --type-section: 600 15px/20px var(--font-ui);
  --type-card: 600 14px/20px var(--font-ui);
  --type-body: 450 14px/20px var(--font-ui);
  --type-metric: 600 13px/18px var(--font-ui);
  --type-support: 450 12px/17px var(--font-ui);
  --type-eyebrow: 500 11px/16px var(--font-ui);
}