:root {
  --brand: #2307f2; --brand-text: #ffffff; --brand-dark: #1c06c2; --brand-tint: #e9e6fe;
  --dark: #33333c; --dark-text: #ffffff;
  --accent: #0a8f39; --accent-text: #1f1f1f;
  --aggregate: #d97706; --aggregate-text: #1f1f1f; --aggregate-tint: #fbf1e6;
  --concrete: #2563eb; --concrete-text: #ffffff; --concrete-tint: #e9effd;
  --lowbed: #7c3aed; --lowbed-text: #ffffff; --lowbed-tint: #f2ebfd;
}

/* Django admin */
:root, html[data-theme="light"] {
  --primary: #2307f2; --primary-fg: #ffffff; --secondary: #33333c; --accent: #0a8f39;
  --header-bg: #33333c; --header-color: #ffffff; --header-branding-color: #0a8f39;
  --header-link-color: #ffffff;
  --breadcrumbs-bg: #2307f2; --breadcrumbs-fg: #ffffff; --breadcrumbs-link-fg: #ffffff;
  --link-fg: #2307f2; --link-hover-color: #33333c; --link-selected-fg: #2307f2;
  --button-bg: #2307f2; --button-fg: #ffffff; --button-hover-bg: #1c06c2;
  --default-button-bg: #33333c; --default-button-hover-bg: #26262d;
  --object-tools-bg: #33333c; --object-tools-hover-bg: #2307f2;
}

/* Header bar on every page */
header { background: var(--dark) !important; color: var(--dark-text) !important; border-bottom: 4px solid var(--accent); }
header h1 { color: var(--accent) !important; }
.brand-logo { height: 34px; width: auto; background: transparent; padding: 3px 6px; border-radius: 4px; margin-right: 6px; }
header h1::before { content: "Camp Mendocino \00b7 "; }
header button, header input, header select, header .btn {
  background: rgba(255, 255, 255, .12) !important; border-color: rgba(255, 255, 255, .28) !important;
  color: var(--dark-text) !important; }
header select option { background: #ffffff; color: #111827; }
header #newbtn { background: var(--brand) !important; border-color: var(--brand) !important; color: var(--brand-text) !important; }

/* Buttons and links */
.btn-primary { background: var(--brand) !important; color: var(--brand-text) !important; }
.link, .edit { color: var(--brand) !important; }
.cell.empty .add { color: var(--brand) !important; }
.pill.on { background: var(--dark) !important; border-color: var(--dark) !important; color: var(--dark-text) !important; }
#banner { background: var(--brand) !important; color: var(--brand-text) !important; }
#banner button { border-color: var(--brand-text) !important; color: var(--brand-text) !important; }
.res.armed { outline-color: var(--brand) !important; background: var(--brand-tint) !important; }
.card.moving { outline-color: var(--accent) !important; }
.job.sel { border-color: var(--brand) !important; background: var(--brand-tint) !important; }

/* Delivery types: board cards, badges, timeline blocks, pop-up tabs */
.card { border-left-color: var(--aggregate) !important; background: var(--aggregate-tint) !important; }
.card.concrete { border-left-color: var(--concrete) !important; background: var(--concrete-tint) !important; }
.card.lowbed { border-left-color: var(--lowbed) !important; background: var(--lowbed-tint) !important; }
.badge { background: var(--aggregate) !important; color: var(--aggregate-text) !important; }
.badge.concrete { background: var(--concrete) !important; color: var(--concrete-text) !important; }
.badge.lowbed { background: var(--lowbed) !important; color: var(--lowbed-text) !important; }
.blk { border-left-color: var(--aggregate) !important; background: var(--aggregate-tint) !important; }
.blk.concrete { border-left-color: var(--concrete) !important; background: var(--concrete-tint) !important; }
.blk.lowbed { border-left-color: var(--lowbed) !important; background: var(--lowbed-tint) !important; }
.seg button.on[data-type="aggregate"] { background: var(--aggregate) !important; border-color: var(--aggregate) !important; color: var(--aggregate-text) !important; }
.seg button.on[data-type="concrete"] { background: var(--concrete) !important; border-color: var(--concrete) !important; color: var(--concrete-text) !important; }
.seg button.on[data-type="lowbed"] { background: var(--lowbed) !important; border-color: var(--lowbed) !important; color: var(--lowbed-text) !important; }