:root {
  --background: #090d12;
  --card: #0f1620;
  --content: #141e2b;
  --sidebar: #0b1119;
  --border: #223245;
  --border-strong: #3b5373;
  --foreground: #e6edf5;
  --muted-foreground: #8fa2b8;
  --placeholder: #54687f;
  --primary: #00e5ff;
  --primary-foreground: #00252e;
  --accent: #f59e0b;
  --hazard-critical: #ef4444;
  --hazard-high: #f97316;
  --hazard-mid: #f59e0b;
  --hazard-low: #10b981;
  --contour-index: rgba(0, 229, 255, 0.45);
  --contour-minor: rgba(0, 229, 255, 0.18);
  --neatline-tick: #4b6688;
}

html.light {
  --background: #f4f6f9;
  --card: #ffffff;
  --content: #e8edf3;
  --sidebar: #f0f3f7;
  --border: #cbd5e1;
  --border-strong: #94a3b8;
  --foreground: #0f172a;
  --muted-foreground: #475569;
  --placeholder: #94a3b8;
  --primary: #0284c7;
  --primary-foreground: #ffffff;
  --accent: #d97706;
  --hazard-critical: #dc2626;
  --hazard-high: #c2410c;
  --hazard-mid: #b45309;
  --hazard-low: #047857;
  --contour-index: rgba(2, 132, 199, 0.45);
  --contour-minor: rgba(2, 132, 199, 0.20);
  --neatline-tick: #64748b;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  overflow: hidden;
  margin: 0;
  padding: 0;
  user-select: none;
}

/* King Kirby Archetype #13: Cartographic Graticule Collar */
.graticule-neatline {
  box-shadow: inset 0 0 0 1px var(--border-strong), inset 0 0 0 4px var(--background), inset 0 0 0 5px var(--border);
}

/* Graticule Tick Pattern */
.graticule-ticks-x {
  background-size: 24px 100%;
  background-image: linear-gradient(to right, var(--neatline-tick) 1px, transparent 1px);
}
.graticule-ticks-y {
  background-size: 100% 24px;
  background-image: linear-gradient(to bottom, var(--neatline-tick) 1px, transparent 1px);
}

/* Interactive Drawer Transition */
.drawer-panel {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

/* Monospace Coordinate Callouts */
.font-geodetic {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}

/* Map Canvas */
#vector-canvas {
  image-rendering: -webkit-optimize-contrast;
}

/* ========================================================================= */
/* King Kirby Archetype #13: 3-Axis Layout Density Tiers                      */
/* ========================================================================= */
body[data-density="condensed"] #telemetry-drawer {
  padding: 0.5rem 0.75rem !important;
}
body[data-density="condensed"] .dense-card {
  padding: 0.35rem 0.5rem !important;
  font-size: 10px !important;
}
body[data-density="condensed"] #collar-top,
body[data-density="condensed"] #collar-bottom {
  height: 0.65rem !important;
  font-size: 8px !important;
}

body[data-density="compact"] #telemetry-drawer {
  padding: 0.75rem 1rem !important;
}
body[data-density="compact"] .dense-card {
  padding: 0.625rem !important;
  font-size: 11px !important;
}

body[data-density="editorial"] #telemetry-drawer {
  padding: 1.25rem 1.75rem !important;
}
body[data-density="editorial"] .dense-card {
  padding: 1rem !important;
  font-size: 12px !important;
}
body[data-density="editorial"] #stat-blight-score {
  font-size: 1.5rem !important;
}
body[data-density="editorial"] #collar-top,
body[data-density="editorial"] #collar-bottom {
  height: 1.1rem !important;
  font-size: 10px !important;
}