/* Brand theme: red, white, black, silver. Loaded after style.css and only overrides tokens + chrome. */

:root {
  --bg: #e8e9eb;            /* light silver */
  --surface: #ffffff;
  --surface-2: #f1f2f3;
  --border: #c3c6ca;        /* silver */
  --text: #111113;
  --text-muted: #5f6368;
  --accent: #c8102e;        /* brand red */
  --accent-strong: #9e0b23;
  --accent-contrast: #ffffff;
  --focus-ring: #c8102e;
  --danger: #8a0a1c;
  --danger-bg: #fbe8eb;
  --silver: #a7abb0;
  --nav-bg: #0b0b0c;        /* black bar */
  --nav-text: #d5d8dc;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0b0c;
    --surface: #18191b;
    --surface-2: #222326;
    --border: #3d4045;
    --text: #f5f5f6;
    --text-muted: #b3b7bc;  /* silver */
    --accent: #e0263f;
    --accent-strong: #ff4d63;
    --accent-contrast: #ffffff;
    --focus-ring: #ff4d63;
    --danger: #ff8a95;
    --danger-bg: #3a1419;
    --silver: #8e9297;
    --nav-bg: #000000;
    --nav-text: #c9ccd0;
  }
}

:root[data-theme="dark"] {
  --bg: #0b0b0c;
  --surface: #18191b;
  --surface-2: #222326;
  --border: #3d4045;
  --text: #f5f5f6;
  --text-muted: #b3b7bc;
  --accent: #e0263f;
  --accent-strong: #ff4d63;
  --accent-contrast: #ffffff;
  --focus-ring: #ff4d63;
  --danger: #ff8a95;
  --danger-bg: #3a1419;
  --silver: #8e9297;
  --nav-bg: #000000;
  --nav-text: #c9ccd0;
}

/* Black top bar with a red underline and silver links. */
.topnav {
  background: var(--nav-bg);
  border-bottom: 3px solid var(--accent);
}
.topnav .brand {
  color: #ffffff;
  letter-spacing: 0.02em;
}
.nav-links a {
  color: var(--nav-text);
}
.nav-links a:hover {
  background: #26282b;
  color: #ffffff;
}
.nav-links a.active {
  background: var(--accent);
  color: #ffffff;
}

/* Silver edge on cards so white-on-silver reads as brushed metal, not flat grey. */
.card {
  border-color: var(--border);
  border-top: 3px solid var(--silver);
}