/*
 * Wardogs — the house skin, and the default.
 *
 * The palette is the Hub's own (see app/globals.css in wardogshub): gunmetal
 * near-black, brushed gold, and the red that only ever marks something going
 * wrong. IBM Plex Sans throughout, the way the Hub sets it.
 *
 * The chrome follows: gold is an outline, not a fill — the console's .btn-gold
 * is already the stencilled outline button, so this skin takes the shared fill
 * rule back off — panels sit on a faint gold dot grid, and headings are set in
 * wide caps.
 */

:root,
[data-brand="wardogs"] {
  --bg: #0b0f12;
  --surface: #141a20;
  --surface-2: #1a222a;
  --field: #0e1317;
  --primary: #d4af37;
  --primary-ink: #1a1506;
  --secondary: #5a6a75;
  --accent: #c0392b;
  --fg: #eaeaea;
  --muted: #8b9aa6;
  --line: color-mix(in srgb, var(--secondary) 28%, transparent);
  --valkyra: #e05a5a;
  --lonestar: #5b9bd5;
  --manticore: #5cb87a;
  /* Kill Feed markers (FeedKillMarkers): team = teamkill, watch = worth a look. alert uses --accent. */
  --teamkill: #e8c52a;
  --watch: #d99a2b;
  --flag: #b794f6;

  /* Status: the dots on a server tab, the apply badges, inline errors. */
  --good: #4f9d62;
  --bad: #c0392b;
  --warn: #d99a2b;
  --info: #5b9bd5;
  --idle: #5a6a75;
  --bad-soft: rgba(192, 57, 43, 0.18);
  --badge-live: #6fbf85;
  --badge-next: #d4af37;

  /* Anything painted over the page: modal backdrop, tour cut-out, stage lift. */
  --scrim: rgba(0, 0, 0, 0.58);
  --spotlight: rgba(2, 5, 8, 0.72);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
  --shadow-lift: 0 -10px 28px rgba(0, 0, 0, 0.32);
  --radius: 10px;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", ui-monospace, monospace;
}

/* A gold dot grid, the Hub's map backdrop reduced to what a console can carry. */
[data-brand="wardogs"].plus-grid::before,
[data-brand="wardogs"] .plus-grid::before {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='1' fill='%23d4af37' fill-opacity='0.16'/%3E%3C/svg%3E");
}

/* Gold reads as an outline here, not a fill: the shared rule paints .btn-gold
   solid for the flat skins, and this puts the stencil back. */
[data-brand="wardogs"] .btn-gold {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

[data-brand="wardogs"] .btn-gold:hover {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: var(--primary);
  color: var(--primary);
}

/* Military signage: wide caps on anything that titles a thing. */
[data-brand="wardogs"] .brand h1,
[data-brand="wardogs"] .card > h2,
[data-brand="wardogs"] .card > h3,
[data-brand="wardogs"] .nav a {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

[data-brand="wardogs"] .topbar {
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

/* The active tab and nav row are marked with a gold rule rather than a fill,
   so the gold stays rare enough to mean something. */
[data-brand="wardogs"] .nav a.active,
[data-brand="wardogs"] .server-tab.active {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-left: 2px solid var(--primary);
  color: var(--primary);
}

[data-brand="wardogs"] .card,
[data-brand="wardogs"] .connect-card {
  border-color: color-mix(in srgb, var(--secondary) 34%, transparent);
}