:root {
  /* Raw Pioneer palette (hex straight from the brand guide) */
  --pioneer-navy: #164E7B;
  --pioneer-dark-navy: #0C365F;
  --pioneer-teal: #40B393;
  --pioneer-coral: #F16044;
  --pioneer-yellow: #F6CC4A;
  --pioneer-gray: #666767;
  --pioneer-navy-tint: #e8f5f9;   /* guide's special 15% Navy background */
  --pioneer-teal-tint: #e2f4ef;
  --pioneer-coral-tint: #fde7e3;
  --pioneer-yellow-tint: #fef7e4;
  --pioneer-gray-tint: #ececec;

  /* Type — Real Head Pro / Proxima Nova roles mapped to the live site's Barlow */
  --font-head: 'Barlow Condensed', 'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Surfaces + text — LIGHT (default) */
  --bg: #ffffff;
  --bg-alt: var(--pioneer-navy-tint);
  --surface: #ffffff;
  --surface-2: #f4f8fb;
  --surface-3: #eef3f8;
  --border: rgba(22, 78, 123, 0.18);
  --border-soft: rgba(22, 78, 123, 0.12);
  --border-strong: rgba(22, 78, 123, 0.32);
  --heading: var(--pioneer-navy);
  --text: #333a41;
  --text-muted: var(--pioneer-gray);
  --text-faint: #8a9299;
  --link: var(--pioneer-navy);
  --link-hover: var(--pioneer-teal);
  --on-accent: #ffffff;
  --field-bg: #ffffff;
  --shadow: 0 1px 2px rgba(12, 54, 95, 0.06), 0 10px 30px rgba(12, 54, 95, 0.07);

  /* Severity — solid (dots, borders, counts) */
  --good: var(--pioneer-teal);
  --critical: var(--pioneer-coral);
  --attention: var(--pioneer-yellow);
  --neutral: var(--pioneer-navy);
  --pending: var(--pioneer-gray);
  --running: var(--pioneer-navy);
  --unreachable: var(--pioneer-gray);
  /* Severity — badge text ink (readable on the soft tint; never text on solid yellow) */
  --good-ink: #1c7d63;
  --critical-ink: #bf3f26;
  --attention-ink: #8a6a12;
  --neutral-ink: var(--pioneer-navy);
  --pending-ink: #565757;
  --running-ink: var(--pioneer-navy);
  --unreachable-ink: #565757;
  /* Severity — soft tint backgrounds */
  --good-soft: var(--pioneer-teal-tint);
  --critical-soft: var(--pioneer-coral-tint);
  --attention-soft: var(--pioneer-yellow-tint);
  --neutral-soft: var(--pioneer-navy-tint);
  --pending-soft: var(--pioneer-gray-tint);
  --running-soft: var(--pioneer-navy-tint);
  --unreachable-soft: var(--pioneer-gray-tint);

  /* Dark-hero glow blobs — off in light mode (brand patterns are used instead) */
  --glow-1: transparent;
  --glow-2: transparent;
  --glow-3: transparent;
  --pattern-opacity: 1;
}

:root[data-theme="dark"] {
  --bg: var(--pioneer-dark-navy);
  --bg-alt: #0a2f52;
  --surface: rgba(22, 78, 123, 0.32);
  --surface-2: rgba(22, 78, 123, 0.20);
  --surface-3: rgba(22, 78, 123, 0.14);
  --border: rgba(224, 238, 248, 0.16);
  --border-soft: rgba(224, 238, 248, 0.10);
  --border-strong: rgba(64, 179, 147, 0.42);
  --heading: #ffffff;
  --text: #dbe8f2;
  --text-muted: #9db6cb;
  --text-faint: #7f97ab;
  --link: var(--pioneer-teal);
  --link-hover: #7ad3b9;
  --on-accent: #ffffff;
  --field-bg: rgba(6, 20, 36, 0.55);
  --shadow: 0 0 40px rgba(64, 179, 147, 0.10), 0 20px 40px rgba(0, 0, 0, 0.38);

  --good: var(--pioneer-teal);
  --critical: var(--pioneer-coral);
  --attention: var(--pioneer-yellow);
  --neutral: #5b93c4;
  --pending: #9aa5c9;
  --running: var(--pioneer-teal);
  --unreachable: #9aa5c9;
  --good-ink: #62d1b4;
  --critical-ink: #ff8a72;
  --attention-ink: var(--pioneer-yellow);
  --neutral-ink: #8fbbe4;
  --pending-ink: #bcc6e0;
  --running-ink: #62d1b4;
  --unreachable-ink: #bcc6e0;
  --good-soft: rgba(64, 179, 147, 0.16);
  --critical-soft: rgba(241, 96, 68, 0.16);
  --attention-soft: rgba(246, 204, 74, 0.14);
  --neutral-soft: rgba(91, 147, 196, 0.16);
  --pending-soft: rgba(154, 165, 201, 0.15);
  --running-soft: rgba(64, 179, 147, 0.14);
  --unreachable-soft: rgba(154, 165, 201, 0.15);

  /* Recoloured brand glow (teal / navy / coral) for the dark hero */
  --glow-1: rgba(64, 179, 147, 0.22);
  --glow-2: rgba(22, 78, 123, 0.42);
  --glow-3: rgba(241, 96, 68, 0.16);
  --pattern-opacity: 0;
}

/* Shared light/dark toggle button */
.theme-toggle {
  position: fixed; top: 1rem; right: 1rem; z-index: 50;
  width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--heading);
  border: 1px solid var(--border-strong); border-radius: 0;
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow);
}
.theme-toggle:hover { border-color: var(--pioneer-teal); }
.theme-toggle:focus-visible { outline: 2px solid var(--pioneer-teal); outline-offset: 2px; }