/* Aegis color authority. Load last on every route. Foundation supplies only
   existing typography, spacing and component primitives, not the palette. */
:root {
  color-scheme: dark;
  --aegis-base: #0a1319;
  --aegis-surface: #101e27;
  --aegis-surface-2: #142731;
  --aegis-surface-3: #1b333d;
  --aegis-hover: #294851;
  --aegis-line: #294550;
  --aegis-line-strong: #44616b;
  --aegis-text: #edf6f5;
  --aegis-text-2: #dce7e8;
  --aegis-text-3: #b8ced1;
  --aegis-muted: #8d9fa6;
  --aegis-accent: #9fe2c8;
  --aegis-accent-hover: #b8eed9;
  --aegis-accent-soft: #9fe2c81a;
  --aegis-on-accent: #0a211b;
  --aegis-success: #9fe2c8;
  --aegis-warning: #e7ba78;
  --aegis-danger: #ef8d83;
  --aegis-info: #82b8eb;
  --aegis-terminal: #050b0f;
  --aegis-terminal-bar: #0b151c;
  --aegis-terminal-text: #d3e8dd;
  /* Compatibility aliases for existing components. */
  --p-canvas: var(--aegis-base);
  --p-surface: var(--aegis-surface);
  --p-surface-2: var(--aegis-surface-2);
  --p-surface-3: var(--aegis-surface-3);
  --p-surface-hover: var(--aegis-hover);
  --p-text: var(--aegis-text);
  --p-text-2: var(--aegis-text-2);
  --p-text-3: var(--aegis-text-3);
  --p-muted: var(--aegis-muted);
  --p-line: var(--aegis-line);
  --p-line-strong: var(--aegis-line-strong);
  --p-accent: var(--aegis-accent);
  --p-accent-hover: var(--aegis-accent-hover);
  --p-accent-soft: var(--aegis-accent-soft);
  --p-focus: var(--aegis-accent);
  --p-success: var(--aegis-success);
  --p-warning: var(--aegis-warning);
  --p-danger: var(--aegis-danger);
  --p-info: var(--aegis-info);
  --mint: var(--aegis-accent);
  --line: var(--aegis-line);
}
body { background-color: var(--aegis-base); }
body .topbar, body .strategy-header, body .lobby-header,
body .p-header { background: var(--aegis-base); color: var(--aegis-text); }
body .city-preview-panel { background: var(--aegis-base); }
body .auth-split .auth-main { background: var(--aegis-surface); }
body .auth-split .auth-card { background: transparent; }
body .primary-button, body .p-button--primary,
body .lobby-mobile-tabs button[aria-pressed=true] {
  background: var(--aegis-accent); border-color: var(--aegis-accent); color: var(--aegis-on-accent);
}
body .primary-button:hover, body .p-button--primary:hover {
  background: var(--aegis-accent-hover); color: var(--aegis-on-accent);
}

/* Owner-selected UI density (27 Sep 2026): the interface renders at the 90% size the owner
   settled on when zooming the browser out. Foundation type and spacing tokens are rem-based,
   so this single root size scales fonts, padding and gaps together. Media-query breakpoints
   stay in viewport pixels on purpose, so the responsive layout does not shift with it. */
html{font-size:90%}