/* White and olive colour trial. Base orange/charcoal CSS is preserved unchanged.
   Remove this stylesheet's links to return to the original palette. */
:root,
body,
#main.home-signed-in:not(:has(#page-landing.active)) {
  --paper: #f8f9f5;
  --paper-solid: #ffffff;
  --ink: #242d1e;
  --ink-soft: #45513b;
  --graphite: #5b6652;
  --grid: #edf0e6;
  --grid-strong: #c6cebb;
  --card-border: #c6cebb;
  --amber: #596a32;
  --amber-dark: #485829;
  --orange: #596a32;
  --green: #526735;
  --green-bg: #e8efde;
  --accent-hover: #414f24;
  color-scheme: light;
}

body,
body:has(#main.home-signed-in):not(:has(#page-landing.active)) {
  background-color: var(--paper);
  color: var(--ink);
}

/* The olive header gives the light pages a clear brand colour. */
nav.application-nav,
nav.homepage-nav {
  background: #4d5e2c;
  color: #ffffff;
  border-bottom-color: #3f4e22;
}
nav .logo,
nav .logo .dot { color: #ffffff; }
nav .nav-btn { color: #eef2e7; }
nav .nav-btn:hover { background: #62743d; color: #ffffff; }
nav .nav-btn.active {
  color: #ffffff;
  box-shadow: inset 0 -2px 0 #dde6c5;
}
.nav-icon-btn { border-color: #eef2e7; }
.nav-icon-btn:hover,
.nav-icon-btn.active { color: #ffffff; border-color: #ffffff; }

.btn-primary,
.submit-btn,
.tier-card .tier-badge,
.avatar {
  background: var(--amber);
  border-color: var(--amber);
  color: #ffffff;
}
.btn-primary:hover,
.submit-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #ffffff;
}
.btn-ghost { border-color: var(--card-border); }
.btn-ghost:hover { background: var(--grid); }
.tier-card.selected,
.chip.active,
.opt-btn.selected { background: #e9eedf; }
.tier-card.selected { border-color: var(--amber); }
.preview-note { background: #e8eddf; color: #3b4b25; }
footer,
body:has(#main.home-signed-in):not(:has(#page-landing.active)) footer {
  background: #eef1e8;
  color: var(--ink-soft);
  border-color: var(--card-border);
}
.skip-link:focus { background: var(--paper-solid); color: var(--ink); }
:focus-visible { outline-color: #687d3a; }
input[type="checkbox"] { accent-color: var(--amber); }
.field-error { color: #a83232; }
input[aria-invalid="true"] { border-color: #a83232; }

/* Preserve the timed toast and its progress bar in the new palette. */
#notice,
#notice.error,
#notice.success {
  background: #ffffff;
  color: var(--ink);
  border-color: #70864a;
  box-shadow: 0 12px 32px #29351e26;
}
#notice-title,
.notice-close { color: #485829; }
.notice-close:hover { background: #e9eedf; }
.notice-track { background: #e8eddf; }
#notice-progress { background: #596a32; }
#notice.error { border-left-color: #a83232; }
#notice.error #notice-title { color: #a83232; }

/* Landing rules use @scope, so their hard-coded states are overridden in scope. */
@scope (body:has(#page-landing.active)) {
  .btn-primary,
  .submit-btn,
  .tier-card .tier-badge,
  .avatar { background: var(--amber); color: #ffffff; border-color: var(--amber); }
  .btn-primary:hover,
  .submit-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .tier-card.selected { background: #e9eedf; }
  .nav-icon-btn { border-color: #ffffff; }
  nav { background: #4d5e2c; color: #ffffff; border-bottom-color: #3f4e22; }
  .logo,
  .logo .dot { color: #ffffff; }
  .nav-btn { color: #eef2e7; }
  .nav-btn:hover { background: #62743d; color: #ffffff; }
  .nav-btn.active { color: #ffffff; box-shadow: inset 0 -2px 0 #dde6c5; }
}