/* Mode state is rendered before the page paints; System works without JavaScript. */
:root { color-scheme: light; --bh-action-text: #fff; --bh-featured: #172f38; }
html[data-appearance="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { html[data-appearance="system"] { color-scheme: dark; } }
/* Shared dark tokens cover the legacy page styles as well as the new workspace. */
html[data-appearance="dark"] {
  --theme-ink: var(--bh-ink); --theme-muted: var(--bh-muted); --theme-featured: var(--bh-featured);
  --theme-fill: #365b50; --theme-warning-bg: #39301d; --theme-warning-text: #efd291;
  --theme-danger-bg: #41282d; --theme-danger-text: #ffb1b6; --theme-success-bg: #1c3c32; --theme-success-text: #a5dfb9;
  --ui-border-strong: var(--bh-line); --ui-bg-soft: var(--theme-soft); --ui-text-soft: var(--bh-muted);
}
@media (prefers-color-scheme: dark) {
  html[data-appearance="system"] {
    --theme-ink: var(--bh-ink); --theme-muted: var(--bh-muted); --theme-featured: var(--bh-featured);
    --theme-fill: #365b50; --theme-warning-bg: #39301d; --theme-warning-text: #efd291;
    --theme-danger-bg: #41282d; --theme-danger-text: #ffb1b6; --theme-success-bg: #1c3c32; --theme-success-text: #a5dfb9;
    --ui-border-strong: var(--bh-line); --ui-bg-soft: var(--theme-soft); --ui-text-soft: var(--bh-muted);
  }
}
.app-body .secondary-button, .secondary-link, .compact-secondary, .header-link,
.app-body .secondary-button:hover, .secondary-link:hover, .compact-secondary:hover, .header-link:hover { color: var(--bh-ink); }
.app-body .danger-button { color: var(--theme-danger-text, #a32f39); }
.action-link.active-link, .nav-link.active { color: #f6fcf9; border-color: var(--bh-featured); }
.hero-summary-card:first-child { border-color: var(--bh-featured); }
.hero-summary-card:first-child .hero-summary-number, .summary-card-featured .summary-value { color: #fff; }
.brand-mark { background: var(--bh-featured); }
.goal-progress-fill, .goal-mini-fill, .bar-fill, .setup-progress > span { background: var(--bh-accent); }
.palette-swatch { display: block; width: 26px; height: 26px; margin-bottom: 6px; border-radius: 50%; background: var(--swatch); border: 1px solid var(--bh-line); }
.appearance-form { max-width: 960px; }
.appearance-form fieldset { min-width: 0; margin: 0 0 26px; padding: 0 0 26px; border: 0; border-bottom: 1px solid var(--bh-line); }
.appearance-form legend { margin-bottom: 6px; padding: 0; color: var(--bh-ink); font-size: 17px; font-weight: 650; }
.appearance-options { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.palette-options { grid-template-columns: repeat(5, minmax(0,1fr)); }
.appearance-choice { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--bh-line); border-radius: 10px; cursor: pointer; }
.appearance-choice:has(input:checked) { border-color: var(--bh-accent); outline: 1px solid var(--bh-accent); background: var(--bh-mint); }
.appearance-choice input { flex: 0 0 18px; width: 18px; height: 18px; margin: 4px 0 0; }
.appearance-choice strong, .appearance-choice small { display: block; }
.appearance-choice small { margin-top: 4px; color: var(--bh-muted); font-size: 12px; }
.custom-color-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.custom-color-grid label { display: grid; gap: 8px; color: var(--bh-ink); font-size: 13px; }
.app-body .custom-color-grid input[type=color] { width: 100%; height: 52px; padding: 4px; cursor: pointer; }
.color-value { font-size: 12px; color: var(--bh-muted); font-variant-numeric: tabular-nums; }
.appearance-preview { margin: 0 0 16px; padding: 24px; border: 1px solid var(--bh-line); border-radius: 12px; background: var(--preview-canvas,var(--bh-canvas)); color: var(--preview-ink,var(--bh-ink)); }
.appearance-preview h2, .appearance-preview .section-kicker, .appearance-preview p { color: inherit; }
.preview-action { display: inline-block; margin-top: 8px; padding: 10px 16px; border-radius: 8px; background: var(--preview-accent,var(--bh-accent)); color: var(--preview-action-text,var(--bh-action-text)); font-size: 13px; font-weight: 650; }
@media (max-width: 700px) {
  .appearance-options, .palette-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .appearance-options:not(.palette-options) .appearance-choice:last-child { grid-column: 1/-1; }
  .custom-color-grid { grid-template-columns: minmax(0,1fr); }
}
/* PDFs and paper keep a legible light view, regardless of the saved screen mode. */
@media print {
  :root { color-scheme: light; --bh-canvas: #fff !important; --bh-white: #fff !important; --bh-ink: #172f38 !important; --bh-muted: #596d73 !important; --bh-line: #dde4de !important; --bh-accent: #176f65 !important; --bh-accent-dark: #11544c !important; --bh-action-text: #fff !important; --theme-surface: #fff !important; --theme-soft: #f8f9f5 !important; --theme-line: #dde4de !important; --theme-ink: #172f38 !important; --theme-muted: #596d73 !important; --theme-warning-bg: #fffaf0 !important; --theme-warning-text: #6b511d !important; --theme-danger-text: #991b1b !important; --theme-danger-bg: #fff0f1 !important; --theme-success-bg: #edf7ef !important; --theme-success-text: #176f65 !important; --theme-fill: #76baa1 !important; --theme-featured: #172f38 !important; --bh-featured: #172f38 !important; --bh-mint: #dcefe7 !important; }
}