/* HPB Admin — Greenkeeper light / dark theme tokens
   Drop in after styles.css (or fold :root into it).
   Toggle: document.documentElement.dataset.theme = 'light' | 'dark'
   Default: light (cream panel). No Broughty navy/gold.
*/

:root,
[data-theme="light"] {
  /* Brand primitives */
  --bottle-green: #1F4A3A;
  --bottle-mid: #2A5F4B;
  --cream: #F4EDE0;
  --copper: #C0683A;
  --copper-light: #E2B08F;
  --copper-deep: #A9532A;
  --claret: #6E2433;
  --charcoal: #23272A;

  /* Semantic — light (current cream panel) */
  --bg-page: #F4EDE0;
  --bg-sidebar: #182F28;
  --bg-topbar: #1F4A3A;
  --bg-card: #FFFFFF;
  --bg-input: #FFFFFF;
  --bg-row-alt: #F9F5EE;
  --bg-cream-deep: #EBE2D0;
  --border: #D9CFBE;
  --border-strong: #C0683A;
  --text: #23272A;
  --text-muted: #6B6660;
  --text-tertiary: #B8B0A4;
  --text-on-brand: #F4EDE0;
  --heading: #1F4A3A;
  --accent: #C0683A;
  --accent-light: #E2B08F;
  --accent-deep: #A9532A;
  --danger: #6E2433;
  --danger-bg: #F6E6E9;
  --danger-edge: #DC93A2;
  --success-bg: #E7F0EB;
  --btn-primary-bg: #C0683A;
  --btn-primary-fg: #F4EDE0;
  --btn-primary-hover: #A9532A;
  --nav-active-bg: #1F4A3A;
  --nav-link: #E2B08F;
  --rule: #C0683A;

  /* Aliases so existing styles.css selectors keep working */
  --sidebar: var(--bg-sidebar);
  --white: var(--bg-card);
  --row-alt: var(--bg-row-alt);
  --cream-deep: var(--bg-cream-deep);
  --muted: var(--text-muted);
  --muted-edge: var(--text-tertiary);
  --error-bg: var(--danger-bg);

  --sidebar-w: 228px;
  --header-h: 72px;
}

[data-theme="dark"] {
  --bottle-green: #1F4A3A;
  --bottle-mid: #2A5F4B;
  --cream: #F4EDE0;
  --copper: #C0683A;
  --copper-light: #E2B08F;
  --copper-deep: #A9532A;
  --claret: #6E2433;
  --charcoal: #23272A;

  /* Semantic — dark (dashboard modern) */
  --bg-page: #0E1413;
  --bg-sidebar: #0B1110;
  --bg-topbar: #0B1110;
  --bg-card: #141F1D;
  --bg-input: #1B2926;
  --bg-row-alt: #1B2926;
  --bg-cream-deep: #1B2926;
  --border: #27312E;
  --border-strong: #C0683A;
  --text: #F4EDE0;
  --text-muted: #9A9B92;
  --text-tertiary: #8F9088;
  --text-on-brand: #F4EDE0;
  --heading: #F4EDE0;
  --accent: #C0683A;
  --accent-light: #E2B08F;
  --accent-deep: #A9532A;
  --danger: #6E2433;
  --danger-bg: #2A1A1E;
  --danger-edge: #DC93A2;
  --success-bg: #143028;
  /* Copper Light + dark text for WCAG on primary buttons */
  --btn-primary-bg: #E2B08F;
  --btn-primary-fg: #23272A;
  --btn-primary-hover: #C0683A;
  --nav-active-bg: #1F4A3A;
  --nav-link: #E2B08F;
  --rule: #C0683A;

  --sidebar: var(--bg-sidebar);
  --white: var(--bg-card);
  --row-alt: var(--bg-row-alt);
  --cream-deep: var(--bg-cream-deep);
  --muted: var(--text-muted);
  --muted-edge: var(--text-tertiary);
  --error-bg: var(--danger-bg);
}

/* ---- Remap chrome that currently hard-codes brand vars as surfaces ---- */

body {
  background: var(--bg-page);
  color: var(--text);
}

h1, h2, h3, .serif {
  color: var(--heading);
}

.topbar {
  background: var(--bg-topbar);
  color: var(--text-on-brand);
}
.topbar::after {
  background: var(--rule);
}
.topbar .brand,
.topbar .brand-title {
  color: var(--text-on-brand);
}

.sidebar {
  background: var(--bg-sidebar);
  color: var(--text-on-brand);
}
.sidebar .persona,
.sidebar a {
  color: var(--nav-link);
}
.sidebar a:hover {
  color: var(--text-on-brand);
}
.sidebar a.active {
  background: var(--nav-active-bg);
  color: var(--text-on-brand);
  border-left-color: var(--accent);
}
.sidebar .side-foot {
  color: var(--text-tertiary);
}

.main .page-title { color: var(--heading); }
.page-sub { color: var(--text-muted); }

.site-footer { color: var(--heading); }
.site-footer .left-note { color: var(--text-muted); }

.stat-card,
.panel,
.auth-card {
  background: var(--bg-card);
  border-color: var(--border-strong);
}
.stat-card .label,
.stat-card .detail,
.panel .panel-sub {
  color: var(--text-muted);
}
.stat-card .value {
  color: var(--heading);
}
.panel h2 {
  color: var(--heading);
}
.panel-rule {
  background: var(--rule);
}

table.data th {
  color: var(--text-muted);
  border-bottom-color: var(--border);
}
table.data td {
  border-bottom-color: var(--bg-cream-deep);
  color: var(--text);
}
table.data tbody tr:nth-child(even) {
  background: var(--bg-row-alt);
}

.pill {
  border-color: var(--border);
  background: var(--bg-page);
  color: var(--text);
}

.btn {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}
.btn:hover {
  background: var(--btn-primary-hover);
  color: var(--btn-primary-fg);
}
.btn.ghost {
  background: transparent;
  color: var(--accent-deep);
}
[data-theme="dark"] .btn.ghost {
  color: var(--accent-light);
}
.btn.danger-outline {
  background: var(--bg-card);
  color: var(--danger);
  border-color: var(--danger);
}

.filters .chip {
  border-color: var(--border);
  background: var(--bg-page);
  color: var(--text);
}
.filters .chip.on {
  background: var(--accent);
  color: var(--text-on-brand);
  border-color: var(--accent);
}
.filters .search {
  border-color: var(--border);
  background: var(--bg-input);
  color: var(--text);
}

.field label { color: var(--text); }
.field input,
.field select,
.field textarea {
  border-color: var(--text-tertiary);
  background: var(--bg-input);
  color: var(--text);
}

.error-box {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}
[data-theme="dark"] .error-box {
  color: var(--text-on-brand);
  border-color: var(--danger-edge);
}
.success-box {
  background: var(--success-bg);
  border-color: var(--bottle-green);
  color: var(--heading);
}

.role-option {
  border-color: var(--border);
  background: var(--bg-card);
  color: var(--text);
}
.role-option.selected,
.role-option:has(input:checked) {
  background: var(--bg-input);
  border-color: var(--accent);
}
.role-option .desc { color: var(--text-muted); }

.recent-list li {
  border-bottom-color: var(--bg-cream-deep);
}
.recent-list .name { color: var(--text); }
.recent-list .meta { color: var(--text-muted); }

.coming-soon {
  background: var(--bg-cream-deep);
  color: var(--text-muted);
}

.matrix th,
.matrix td { border-color: var(--border); }
.matrix th {
  background: var(--bg-cream-deep);
  color: var(--heading);
}
.matrix td.yes { color: var(--heading); }
.matrix td.no { color: var(--text-muted); }

.toggle-row {
  border-bottom-color: var(--bg-cream-deep);
  color: var(--text);
}
.switch { background: var(--text-tertiary); }
.switch.on { background: var(--bottle-green); }
.switch::after { background: var(--bg-card); }

a { color: var(--accent-deep); }
[data-theme="dark"] a { color: var(--accent-light); }

/* Anchor buttons: dark `a` accent must not override primary btn fg (Charcoal on Copper Light) */
[data-theme="dark"] a.btn { color: var(--btn-primary-fg); } /* Charcoal #23272A */
[data-theme="dark"] a.btn:hover { color: var(--btn-primary-fg); }
[data-theme="dark"] a.btn.ghost { color: var(--accent-light); }
[data-theme="dark"] a.btn.ghost:hover { color: var(--text-on-brand); }
[data-theme="dark"] a.btn.danger-outline { color: var(--danger-edge); }
[data-theme="dark"] a.btn.danger-outline:hover { color: var(--danger-edge); }

/* Sign out is a button.btn in the topbar; keep Charcoal on Copper Light */
[data-theme="dark"] .topbar .sign-out .btn,
[data-theme="dark"] .topbar .sign-out .btn:hover {
  color: var(--btn-primary-fg);
}

/* Coach pill: Claret on dark card is unreadable — Cream text + danger-edge */
[data-theme="dark"] .pill.role-coach {
  color: var(--cream);
  border-color: var(--danger-edge); /* #DC93A2 */
  background: var(--bg-card);
}

.example-ribbon,
.example-tag {
  background: var(--claret);
  color: var(--cream);
}

/* ---- Theme picker (segmented Light | Dark) ---- */

.theme-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(244, 237, 224, 0.35);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.18);
}
.theme-toggle button {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0.28rem 0.75rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  background: transparent;
  color: rgba(244, 237, 224, 0.72);
  line-height: 1.3;
}
.theme-toggle button[aria-pressed="true"] {
  background: var(--copper-light);
  color: var(--charcoal);
}
.theme-toggle button:focus-visible {
  outline: 2px solid var(--copper-light);
  outline-offset: 1px;
}

/* Place in .topbar before Sign out:
   <div class="theme-toggle" role="group" aria-label="Colour theme">
     <button type="button" data-theme-set="light" aria-pressed="true">Light</button>
     <button type="button" data-theme-set="dark" aria-pressed="false">Dark</button>
   </div>
*/