/* Four-color application theme. Status labels keep their existing semantic palette. */
:root {
  --black: #000000;
  --white: #ffffff;
  --nav: #1c355e;
  --nav2: var(--nav);
  --ink: var(--black);
  --muted: rgba(0, 0, 0, .62);
  --line: rgba(0, 0, 0, .09);
  --bg: rgba(28, 53, 94, .025);
  --blue: var(--nav);
  --teal: var(--nav);
  --red: var(--nav);
  --orange: #ffad00;
  --accent: #ffad00;
  --accent-rgb: 255, 173, 0;
  --accent-hover: var(--accent);
  --accent-ink: var(--nav);
  --accent-price: var(--black);
  --accent-outline: var(--nav);
  --accent-border: rgba(255, 173, 0, .55);
  --accent-soft: rgba(255, 173, 0, .12);
  --accent-subtle: rgba(255, 173, 0, .055);
  --accent-pale: var(--accent);
  --brand-cream: var(--accent-soft);
  --brand-peach: var(--accent);
  --brand-border: var(--line);
  --brand-soft: var(--accent-soft);
  --shadow: 0 4px 24px rgba(0, 0, 0, .025);
}
html { background: var(--white); }
body { color: var(--black); background: var(--bg); }
.topbar { background: rgba(255, 255, 255, .97); }
.sidebar { background: var(--white); }
h1, h2, h3, .product-link, .btn.secondary { color: var(--nav); }
.nav-item.active { background: var(--accent-soft); color: var(--nav); }
.nav-item.active span { color: var(--nav); }
#runNowBtn { background: var(--accent); color: var(--nav); box-shadow: 0 5px 14px rgba(255, 173, 0, .15); }
#runNowBtn:hover { background: var(--accent); box-shadow: 0 5px 14px rgba(0, 0, 0, .12); }
.brand-mark, .login-brand > span { color: var(--nav); }
.hero-card { background: var(--nav); }
.hero-card h2 { color: var(--white); }
.hero-card p:not(.eyebrow) { color: rgba(255, 255, 255, .8); }
.hero-card .eyebrow { color: var(--accent); }
#view-targets .product-table .account-price:not(.is-empty) {
  color: var(--black);
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}
button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-color: var(--nav);
}

/* Existing status/label colors are intentionally preserved. */
:root {
  --status-original-accent-border: #f0d184;
  --status-original-muted: #68717b;
  --status-original-accent-hover: #f0a200;
  --status-original-nav2: #294971;
  --status-original-accent-ink: #946200;
  --status-original-brand-border: #cfd2d3;
  --status-original-accent: #ffad00;
  --status-original-accent-pale: #ffe2a0;
  --status-original-brand-soft: #fff4d6;
  --status-original-shadow: 0 4px 24px rgba(28,53,94,.025);
  --status-original-teal: #10a083;
  --status-original-blue: #1c355e;
  --status-original-brand-peach: #ffe2a0;
  --status-original-nav: #1c355e;
  --status-original-white: #fff;
  --status-original-accent-soft: #fff4d6;
  --status-original-accent-subtle: #fffaf0;
  --status-original-brand-cream: #fff4d6;
  --status-original-red: #d94b4b;
  --status-original-line: #e9edf1;
  --status-original-accent-rgb: 255, 173, 0;
  --status-original-accent-price: #9a6800;
  --status-original-ink: #101820;
  --status-original-accent-outline: #ae7500;
  --status-original-orange: #ffad00;
  --status-original-bg: #f7f8fa;
}

/* The login surface uses the same four-color theme. */
.login-overlay { background: radial-gradient(ellipse at 30% 0, var(--accent-subtle), transparent 60%), var(--white); }