/* Shared appearance tokens. The preference is local to this browser; system is the default. */
:root {
  color-scheme: light;
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --surface-hover: #edf2f9;
  --sidebar: #f9fafc;
  --ink: #18263d;
  --ink-soft: #3e506b;
  --muted: #65758d;
  --line: #e3e9f2;
  --line-strong: #c7d2e2;
  --brand: #245dd7;
  --brand-dark: #194bb5;
  --brand-action: #245dd7;
  --brand-action-hover: #194bb5;
  --brand-light: #edf3ff;
  --brand-border: #bfd1fa;
  --green: #137957;
  --green-light: #e9f7f0;
  --green-border: #b9dfcd;
  --red: #b63d48;
  --red-light: #fff0f1;
  --red-border: #efc1c7;
  --amber: #946310;
  --amber-light: #fff6e4;
  --amber-border: #ebd49f;
  --on-brand: #ffffff;
  --chart-secondary: #b9cdef;
  --focus-ring: #6e9bf2;
  --overlay: rgb(15 26 43 / 42%);
  --toast-bg: #24344d;
  --toast-ink: #ffffff;
  --shadow: 0 3px 14px rgb(28 48 80 / 4%);
  --shadow-raised: 0 12px 32px rgb(28 48 80 / 11%);
}

html[data-appearance="dark"] {
  color-scheme: dark;
  --bg: #101722;
  --surface: #182231;
  --surface-soft: #1d293a;
  --surface-hover: #253449;
  --sidebar: #141d2a;
  --ink: #e8eef7;
  --ink-soft: #c0cde0;
  --muted: #9aaac1;
  --line: #2b3a50;
  --line-strong: #415570;
  --brand: #8ab4ff;
  --brand-dark: #accaff;
  --brand-action: #2862d4;
  --brand-action-hover: #3470e6;
  --brand-light: #1d3254;
  --brand-border: #395c8f;
  --green: #77d6ad;
  --green-light: #193b32;
  --green-border: #356652;
  --red: #ff9ba7;
  --red-light: #41272f;
  --red-border: #75434f;
  --amber: #edc47e;
  --amber-light: #3b3224;
  --amber-border: #69563a;
  --chart-secondary: #425e86;
  --focus-ring: #8ab4ff;
  --overlay: rgb(3 8 15 / 68%);
  --toast-bg: #e3ebf7;
  --toast-ink: #172438;
  --shadow: 0 3px 14px rgb(0 0 0 / 12%);
  --shadow-raised: 0 12px 32px rgb(0 0 0 / 26%);
}

@media (prefers-color-scheme: dark) {
  html:not([data-appearance="light"]):not([data-appearance="dark"]) {
    color-scheme: dark;
    --bg: #101722;
    --surface: #182231;
    --surface-soft: #1d293a;
    --surface-hover: #253449;
    --sidebar: #141d2a;
    --ink: #e8eef7;
    --ink-soft: #c0cde0;
    --muted: #9aaac1;
    --line: #2b3a50;
    --line-strong: #415570;
    --brand: #8ab4ff;
    --brand-dark: #accaff;
    --brand-action: #2862d4;
    --brand-action-hover: #3470e6;
    --brand-light: #1d3254;
    --brand-border: #395c8f;
    --green: #77d6ad;
    --green-light: #193b32;
    --green-border: #356652;
    --red: #ff9ba7;
    --red-light: #41272f;
    --red-border: #75434f;
    --amber: #edc47e;
    --amber-light: #3b3224;
    --amber-border: #69563a;
    --chart-secondary: #425e86;
    --focus-ring: #8ab4ff;
    --overlay: rgb(3 8 15 / 68%);
    --toast-bg: #e3ebf7;
    --toast-ink: #172438;
    --shadow: 0 3px 14px rgb(0 0 0 / 12%);
    --shadow-raised: 0 12px 32px rgb(0 0 0 / 26%);
  }
}

/* All component rules consume the same tokens in both appearances. */
html, body, .auth-page { background: var(--bg); color: var(--ink); }
::selection { background: var(--brand-light); color: var(--brand); }
:focus-visible { outline-color: var(--focus-ring); }
input, select, textarea { accent-color: var(--brand-action); }

.topbar, .button, .button.secondary, .customer-card, .summary-strip,
.step-card, dialog.modal, .auth-card { background: var(--surface); color: var(--ink); border-color: var(--line); }
.topbar { background: color-mix(in srgb, var(--surface) 96%, transparent); }
.button { color: var(--ink-soft); border-color: var(--line-strong); }
.button:hover, .button.secondary:hover, .icon-button:hover, .close-modal:hover,
.mobile-menu:hover, .nav-item:hover, .filter-tab:hover, .button-row:hover {
  background: var(--surface-hover); color: var(--ink); border-color: var(--line-strong);
}
.button.primary, .brand-mark { background: var(--brand-action); color: var(--on-brand); border-color: var(--brand-action); }
.button.primary:hover { background: var(--brand-action-hover); color: var(--on-brand); border-color: var(--brand-action-hover); }
.button.ghost { background: transparent; border-color: transparent; color: var(--brand); }
.button.ghost:hover { background: var(--brand-light); color: var(--brand); border-color: transparent; }
.button.danger { background: var(--surface); border-color: var(--red-border); color: var(--red); }
.button.danger:hover { background: var(--red-light); border-color: var(--red-border); color: var(--red); }
.nav-item.active, .filter-tab.active, .avatar { background: var(--brand-light); color: var(--brand); }
.nav-item.active .nav-badge, .kpi-card.accent .kpi-icon { background: var(--brand-light); color: var(--brand); }
.nav-badge { background: var(--surface-hover); color: var(--muted); }
.avatar { border-color: var(--brand-border); }
.sidebar-note, .demo-badge, .account-icon, .kpi-icon, .segmented,
.sn-code, .audit-json, .drop-zone, .statement-head, .modal-foot {
  background: var(--surface-soft); color: var(--ink-soft); border-color: var(--line);
}
.brand-sub, .nav-label, .nav-section-title, .nav-section > h3, .nav-section > .nav-label,
.nav-item, .breadcrumb svg, .topbar-actions > .icon-button, .app-footer, .month-picker,
.sync-status, .session-caption, .submetric, .kpi-label, .kpi-value small,
.kpi-value .currency, .kpi-meta, .account-info small, .account-tag, .chart-label,
.legend, .chart-key, .bar-day > span, .task-text small, .data-note, .small-label,
.number-muted, .invoice-note, .check-list, .activity-content, .activity-time,
.field label, .field small, .detail-item > label, .detail-item > .label,
.detail-item > small, .detail-item > dt, .detail-item dt, .timeline small,
.import-file small, .settings-row small, .compact-summary > span, .page-tab,
.filter-tab, .empty-state, .empty-state svg, .auth-caption, .auth-hint,
.auth-note, .auth-intro p, td small, td .cell-subtitle, .audit-list > li {
  color: var(--muted);
}
.auth-intro .brand, .compact-summary strong { color: var(--ink); }
.kpi-card.accent, .profit-head, .customer-card.selected, .step-card.active,
.preview-box, .notice { background: var(--brand-light); border-color: var(--brand-border); }
.profit-head .big-number, .kpi-card.accent .kpi-value, .profit-head .small-label,
.preview-row strong, .notice { color: var(--brand); }
.customer-card:hover { border-color: var(--brand-border); }
.customer-card.selected { border-color: var(--brand); }
.account-icon.business, .step-card .step-number { background: var(--brand-light); color: var(--brand); }
.account-icon.personal, .file-icon { background: var(--green-light); color: var(--green); }
.kpi-card:hover { box-shadow: var(--shadow-raised); }
.kpi-card:focus-visible { outline-color: var(--focus-ring); }
.table-actions button, .text-button, .link, .page-tab.active, .page-tab:hover { color: var(--brand); }
.link:hover { color: var(--brand-dark); }

/* Numeric tables and financial statuses retain a readable contrast. */
.table-wrap { scrollbar-color: var(--line-strong) transparent; }
thead { background: var(--surface-soft); }
th { color: var(--muted); border-color: var(--line); }
td { color: var(--ink-soft); border-color: var(--line); }
tbody tr:hover { background: var(--surface-soft); }
.account-row, .list-row, .list-row.button-row, .settings-row, .user-row,
.import-file, .formula-total, .wf-opening-row, .wf-todo, .account-tag { border-color: var(--line); }
.pill, .pill.neutral { background: var(--surface-soft); color: var(--muted); }
.pill.info { background: var(--brand-light); color: var(--brand); }
.pill.success, .success-box { background: var(--green-light); color: var(--green); border-color: var(--green-border); }
.pill.warning, .notice.warning, .task-count { background: var(--amber-light); color: var(--amber); border-color: var(--amber-border); }
.pill.danger, .error-message { background: var(--red-light); color: var(--red); border-color: var(--red-border); }
.preview-box .positive, .profit-table .profit-positive { color: var(--green); }
.formula-row, .formula-row > :last-child, .split-row, .preview-row { color: var(--ink-soft); }
.formula-total { color: var(--ink); }
.formula-total > :last-child { color: var(--brand); }
.positive, td.positive { color: var(--green); }
.negative, td.negative { color: var(--red); }

/* Form, login and dialog fields must never inherit a light-only surface. */
.search-input, .month-picker input, .account-select,
.field input, .field select, .field textarea,
input.form-control, select.form-control, textarea.form-control,
.auth-card input, .auth-card select, .wf-field input, .wf-field select, .wf-field textarea {
  background: var(--surface); color: var(--ink); border-color: var(--line-strong);
}
.search-input::placeholder, .field input::placeholder, .field textarea::placeholder,
.auth-card input::placeholder, .wf-field input::placeholder, .wf-field textarea::placeholder {
  color: var(--muted); opacity: 1;
}
.search-input:focus, .field input:focus, .field select:focus, .field textarea:focus,
.auth-card input:focus, .auth-card select:focus, .wf-field input:focus,
.wf-field select:focus, .wf-field textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); outline-color: var(--focus-ring);
}
.field input[readonly], .field input:disabled, .field select:disabled,
.auth-card input:disabled, .wf-field input:disabled {
  background: var(--surface-soft); color: var(--muted);
}
.segmented button { color: var(--muted); }
.segmented button.active, .segmented button[aria-selected="true"] { background: var(--surface); color: var(--brand); }
.preview-box { border-color: var(--brand-border); }
.auth-card { box-shadow: var(--shadow-raised); }
dialog.modal { box-shadow: var(--shadow-raised); }
dialog::backdrop, .wf-dialog::backdrop { background: var(--overlay); }
.toast { background: var(--toast-bg); color: var(--toast-ink); box-shadow: var(--shadow-raised); }

/* Charts use the same blue palette without changing their values or geometry. */
.chart-bars { border-color: var(--line); background: repeating-linear-gradient(to top, transparent 0, transparent 44px, var(--line) 44px, var(--line) 45px); }
.chart-bar, .chart-bar.income, .legend-dot, .legend-dot.income, .bar-pair i, .chart-key i,
.progress-fill, .activity-dot { background: var(--brand); }
.chart-bar.outflow, .legend-dot.outflow, .bar-pair i.out, .chart-key i.out { background: var(--chart-secondary); }
.progress-track { background: var(--surface-hover); }
.activity-dot { box-shadow: 0 0 0 3px var(--brand-light); }
.timeline li, .audit-list > li { border-color: var(--line); }
.timeline li:before { background: var(--brand); border-color: var(--brand-light); }
.audit-list > li::before { background: var(--brand); box-shadow: 0 0 0 4px var(--surface); }
.flow-step { color: var(--muted); }
.flow-step::before { background: var(--line-strong); border-color: var(--surface-soft); }
.flow-step::after { background: var(--line); }
.flow-step.done { color: var(--green); }
.flow-step.done::before { background: var(--green); border-color: var(--green-light); }
.flow-step.done::after { background: var(--green-border); }
.flow-step.current::before { background: var(--brand); border-color: var(--brand-light); }
.drop-zone:hover, .drop-zone.drag-over { background: var(--brand-light); border-color: var(--brand); }

@media print {
  html, body { color-scheme: light; background: #fff; color: #172438; }
  .statement-head, table, thead, th, td { background: #fff; color: #172438; border-color: #ccd4df; }
}