/* Light palette for the desktop-matched web shell. */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #edf3fa;
  --surface: #f5f8fc;
  --surface-2: #e5edf7;
  --ink: #17263d;
  --muted: #60738e;
  --line: #c7d4e3;
  --brand: #2563eb;
  --brand-2: #06b6d4;
  --success: #059669;
  --warn: #d97706;
  --danger: #e11d48;
  --input-bg: #fbfdff;
  --topbar-bg: #09111e;
  --sidebar-bg: #edf3fa;
  --sidebar-panel: #f7f9fc;
  --hover: #e3ebf6;
  --shadow-soft: 0 4px 16px rgba(28, 48, 78, 0.08);
  --shadow-card: 0 8px 24px rgba(28, 48, 78, 0.12);
}

html[data-theme="terra"] {
  color-scheme: light;
  --bg: #f2ebe2;
  --surface: #fffaf4;
  --surface-2: #eee3d6;
  --ink: #30251e;
  --muted: #786554;
  --line: #d9c8b5;
  --brand: #96644a;
  --brand-2: #bd805b;
  --success: #287a58;
  --warn: #a15b18;
  --danger: #ad3444;
  --input-bg: #fffdf9;
  --topbar-bg: #09111e;
  --sidebar-bg: #f2ebe2;
  --sidebar-panel: #fffaf4;
  --hover: #e8dccd;
}

html[data-theme="sunset"] {
  color-scheme: light;
  --bg: #fff2e3;
  --surface: #fffaf5;
  --surface-2: #f6e5d2;
  --ink: #38271f;
  --muted: #80675b;
  --line: #e3c6af;
  --brand: #e35d30;
  --brand-2: #f09a52;
  --success: #247553;
  --warn: #ac6415;
  --danger: #bd3545;
  --input-bg: #fffdf9;
  --topbar-bg: #09111e;
  --sidebar-bg: #fff2e3;
  --sidebar-panel: #fffaf5;
  --hover: #f8e6d4;
}

html[data-theme="sakura"] {
  color-scheme: light;
  --bg: #fff2f7;
  --surface: #fffafd;
  --surface-2: #f8e3ed;
  --ink: #35202b;
  --muted: #805d70;
  --line: #e6c4d4;
  --brand: #d94f86;
  --brand-2: #f08ab5;
  --success: #247553;
  --warn: #a96114;
  --danger: #bd3545;
  --input-bg: #fffdfd;
  --topbar-bg: #09111e;
  --sidebar-bg: #fff2f7;
  --sidebar-panel: #fffafd;
  --hover: #f7dfeb;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="midnight"] {
  color-scheme: dark;
}

html[data-theme="neon"] {
  color-scheme: dark;
  --bg: #090a14;
  --surface: #111323;
  --surface-2: #191c31;
  --ink: #f2f1ff;
  --muted: #aaa8c8;
  --line: #30324d;
  --brand: #8b5cf6;
  --brand-2: #22d3ee;
  --success: #4ade80;
  --warn: #fbbf24;
  --danger: #fb7185;
  --input-bg: #101222;
  --sidebar-bg: #090a14;
  --sidebar-panel: #111323;
  --hover: #1a1d35;
}

html[data-theme="light"] .content,
html[data-theme="terra"] .content,
html[data-theme="sakura"] .content,
html[data-theme="sunset"] .content {
  color: var(--ink);
}

html[data-theme="light"] .content :is(.card, .metric, .panel, .table-wrap, .dashboard-panel, .finance-panel),
html[data-theme="terra"] .content :is(.card, .metric, .panel, .table-wrap, .dashboard-panel, .finance-panel),
html[data-theme="sakura"] .content :is(.card, .metric, .panel, .table-wrap, .dashboard-panel, .finance-panel),
html[data-theme="sunset"] .content :is(.card, .metric, .panel, .table-wrap, .dashboard-panel, .finance-panel) {
  color: var(--ink);
  background-color: var(--surface);
  border-color: var(--line);
}

html[data-theme="light"] .content :is(table, th, td, tbody tr, .muted, small),
html[data-theme="terra"] .content :is(table, th, td, tbody tr, .muted, small),
html[data-theme="sakura"] .content :is(table, th, td, tbody tr, .muted, small),
html[data-theme="sunset"] .content :is(table, th, td, tbody tr, .muted, small) {
  color: var(--ink);
}

html[data-theme="light"] .content tbody tr,
html[data-theme="terra"] .content tbody tr,
html[data-theme="sakura"] .content tbody tr,
html[data-theme="sunset"] .content tbody tr {
  background-color: var(--surface);
  border-color: var(--line);
}

html[data-theme="light"] .content tbody tr:nth-child(even),
html[data-theme="terra"] .content tbody tr:nth-child(even),
html[data-theme="sakura"] .content tbody tr:nth-child(even),
html[data-theme="sunset"] .content tbody tr:nth-child(even) {
  background-color: var(--surface-2);
}

html[data-theme="light"] .content thead th,
html[data-theme="terra"] .content thead th,
html[data-theme="sakura"] .content thead th,
html[data-theme="sunset"] .content thead th {
  color: var(--ink);
  background-color: var(--surface-2);
}

html:is([data-theme="light"], [data-theme="terra"], [data-theme="sunset"], [data-theme="sakura"]) #appDialog.finance-detail-dialog :is(.finance-detail-panel, .finance-detail-spotlight, .finance-detail-collection, .finance-detail-log) {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

html:is([data-theme="light"], [data-theme="terra"], [data-theme="sunset"], [data-theme="sakura"]) #appDialog.finance-detail-dialog :is(.finance-detail-spotlight small, .finance-detail-panel dt, .finance-detail-collection small, .finance-detail-log small, .finance-detail-notes footer span, .finance-detail-stock-note) {
  color: var(--muted);
}

html:is([data-theme="light"], [data-theme="terra"], [data-theme="sunset"], [data-theme="sakura"]) #appDialog.finance-detail-dialog :is(.finance-detail-spotlight strong, .finance-detail-log p, .finance-detail-collection p, .finance-detail-notes footer b, .finance-detail-meta dd) {
  color: var(--ink);
}

html:is([data-theme="light"], [data-theme="terra"], [data-theme="sunset"], [data-theme="sakura"]) #appDialog.finance-detail-dialog :is(.finance-detail-rate, .finance-detail-notes footer, .finance-detail-totals > strong) {
  border-color: var(--line);
}

html:is([data-theme="light"], [data-theme="terra"], [data-theme="sunset"], [data-theme="sakura"]) body[data-page="income"] .ie-page,
html:is([data-theme="light"], [data-theme="terra"], [data-theme="sunset"], [data-theme="sakura"]) body[data-page="expense"] .ie-page {
  color: var(--ink);
  background: var(--surface);
}

html:is([data-theme="light"], [data-theme="terra"], [data-theme="sunset"], [data-theme="sakura"]) body:is([data-page="income"], [data-page="expense"]) :is(.ie-metrics article, .ie-panel, .ie-table-wrap, .ie-distribution-row) {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

html:is([data-theme="light"], [data-theme="terra"], [data-theme="sunset"], [data-theme="sakura"]) body:is([data-page="income"], [data-page="expense"]) :is(.ie-metrics small, .ie-panel small, .ie-table th, .ie-table td small, .ie-table td::before, .ie-distribution-row small, .ie-columns main > footer) {
  color: var(--muted);
}

html:is([data-theme="light"], [data-theme="terra"], [data-theme="sunset"], [data-theme="sakura"]) body:is([data-page="income"], [data-page="expense"]) .ie-table :is(th, td) {
  color: var(--ink);
  border-color: var(--line);
}

html:is([data-theme="light"], [data-theme="terra"], [data-theme="sunset"], [data-theme="sakura"]) body:is([data-page="income"], [data-page="expense"]) .ie-table th {
  background: var(--surface-2);
}

html:is([data-theme="light"], [data-theme="terra"], [data-theme="sunset"], [data-theme="sakura"]) body:is([data-page="income"], [data-page="expense"]) .ie-tabs button,
html:is([data-theme="light"], [data-theme="terra"], [data-theme="sunset"], [data-theme="sakura"]) body:is([data-page="income"], [data-page="expense"]) .ie-actions button {
  color: var(--ink);
  background: var(--surface-2);
  border-color: var(--line);
}

html:is([data-theme="light"], [data-theme="terra"], [data-theme="sunset"], [data-theme="sakura"]) body:is([data-page="income"], [data-page="expense"]) .ie-tabs button[aria-selected="true"],
html:is([data-theme="light"], [data-theme="terra"], [data-theme="sunset"], [data-theme="sakura"]) body:is([data-page="income"], [data-page="expense"]) .ie-save {
  color: var(--on-brand, #ffffff);
  background: var(--brand);
}

html:is([data-theme="light"], [data-theme="terra"], [data-theme="sunset"], [data-theme="sakura"]) body[data-page="finance"] .finance-quick-grid button {
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
}

html:is([data-theme="light"], [data-theme="terra"], [data-theme="sunset"], [data-theme="sakura"]) body[data-page="finance"] .finance-quick-grid button.green {
  color: #065f46;
  background: #d1fae5;
}

html:is([data-theme="light"], [data-theme="terra"], [data-theme="sunset"], [data-theme="sakura"]) body[data-page="finance"] .finance-quick-grid button.red {
  color: #9f1239;
  background: #ffe4e6;
}

html:is([data-theme="light"], [data-theme="terra"], [data-theme="sunset"], [data-theme="sakura"]) body[data-page="finance"] .finance-quick-grid button.purple {
  color: #5b21b6;
  background: #ede9fe;
}

html[data-theme="light"] body {
  color: var(--ink);
  background: var(--bg);
}

html[data-theme="light"] .topbar {
  color: #e8eef8;
  background: var(--topbar-bg);
  border-color: #17263b;
}

html[data-theme="light"] .topbar h1,
html[data-theme="light"] .topbar p,
html[data-theme="light"] .topbar .eyebrow {
  color: #e8eef8;
}

html[data-theme="light"] .topbar .global-search {
  color: #dce7f6;
  background: #111d2d;
  border-color: #293a52;
}

html[data-theme="light"] .topbar .global-search input {
  color: #e8eef8;
  background: transparent;
  border-color: transparent;
}

html[data-theme="light"] .topbar .topbar-tool,
html[data-theme="light"] .topbar .icon-btn {
  color: #e8eef8;
  background: #111d2d;
  border-color: #293a52;
}

html[data-theme="light"] .sidebar {
  color: var(--ink);
  background: var(--sidebar-bg);
  border-color: var(--line);
}

html[data-theme="light"] .brand,
html[data-theme="light"] .sidebar-bottom {
  background: var(--sidebar-bg);
  border-color: var(--line);
}

html[data-theme="light"] .nav-button {
  color: var(--ink);
}

html[data-theme="light"] .nav-button:hover,
html[data-theme="light"] .nav-button.active {
  color: var(--brand);
  background: #dce8f7;
}

html[data-theme="light"] .main,
html[data-theme="light"] .content {
  color: var(--ink);
  background: var(--bg);
}

html[data-theme="light"] .card,
html[data-theme="light"] .metric,
html[data-theme="light"] .customer-data-table td,
html[data-theme="light"] .customer-data-table th {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

html[data-theme="light"] .customer-workspace-head,
html[data-theme="light"] .customer-filterbar,
html[data-theme="light"] .customer-footer {
  background: var(--bg);
  border-color: var(--line);
}

html[data-theme="light"] .customer-data-table th {
  background: #e1eaf5;
}

html[data-theme="light"] .customer-data-table td {
  background: #f1f6fb;
}

html[data-theme="light"] .customer-filterbar input,
html[data-theme="light"] .customer-filterbar select,
html[data-theme="light"] .customer-filterbar .control {
  color: var(--ink);
  background: var(--input-bg);
  border-color: var(--line);
}

html[data-theme="light"] .customer-filterbar input::placeholder {
  color: var(--muted);
  opacity: 1;
}

html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  color: var(--ink);
  background: var(--input-bg);
  border-color: var(--line);
}

html[data-theme="light"] .shell-status-bar {
  color: var(--muted);
  background: #f5f8fc;
  border-color: var(--line);
}

/* Keep shell navigation readable when content uses a light palette. */
html[data-theme="light"],
html[data-theme="terra"],
html[data-theme="sakura"],
html[data-theme="sunset"] {
  --sidebar-bg: var(--bg);
  --sidebar-panel: var(--surface);
}

html[data-theme="light"] .app-shell > .topbar,
html[data-theme="terra"] .app-shell > .topbar,
html[data-theme="sakura"] .app-shell > .topbar,
html[data-theme="sunset"] .app-shell > .topbar {
  color: #e8eef8;
  background: #09111e;
  border-color: #26364b;
}

html[data-theme="light"] .app-shell > .topbar :is(.header-back, .header-app-name, #breadcrumb, #pageTitle, .topbar-tool, .icon-btn),
html[data-theme="terra"] .app-shell > .topbar :is(.header-back, .header-app-name, #breadcrumb, #pageTitle, .topbar-tool, .icon-btn),
html[data-theme="sakura"] .app-shell > .topbar :is(.header-back, .header-app-name, #breadcrumb, #pageTitle, .topbar-tool, .icon-btn),
html[data-theme="sunset"] .app-shell > .topbar :is(.header-back, .header-app-name, #breadcrumb, #pageTitle, .topbar-tool, .icon-btn) {
  color: #e8eef8;
}

html[data-theme="light"] .app-shell > .topbar .header-back:disabled,
html[data-theme="terra"] .app-shell > .topbar .header-back:disabled,
html[data-theme="sakura"] .app-shell > .topbar .header-back:disabled,
html[data-theme="sunset"] .app-shell > .topbar .header-back:disabled {
  opacity: .85;
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .sidebar .brand,
html[data-theme="light"] .sidebar .sidebar-bottom,
html[data-theme="terra"] .sidebar,
html[data-theme="terra"] .sidebar .brand,
html[data-theme="terra"] .sidebar .sidebar-bottom,
html[data-theme="sakura"] .sidebar,
html[data-theme="sakura"] .sidebar .brand,
html[data-theme="sakura"] .sidebar .sidebar-bottom,
html[data-theme="sunset"] .sidebar,
html[data-theme="sunset"] .sidebar .brand,
html[data-theme="sunset"] .sidebar .sidebar-bottom {
  color: var(--ink);
  background: var(--sidebar-bg);
  border-color: var(--line);
}

html[data-theme="light"] .sidebar .nav-group-title,
html[data-theme="terra"] .sidebar .nav-group-title {
  color: var(--muted);
}

html[data-theme="light"] .sidebar .nav-parent,
html[data-theme="light"] .sidebar .nav-parent.open,
html[data-theme="light"] .sidebar #nav > .nav-parent.open,
html[data-theme="terra"] .sidebar .nav-parent,
html[data-theme="terra"] .sidebar .nav-parent.open,
html[data-theme="terra"] .sidebar #nav > .nav-parent.open,
html[data-theme="sakura"] .sidebar .nav-parent,
html[data-theme="sakura"] .sidebar .nav-parent.open,
html[data-theme="sakura"] .sidebar #nav > .nav-parent.open,
html[data-theme="sunset"] .sidebar .nav-parent,
html[data-theme="sunset"] .sidebar .nav-parent.open,
html[data-theme="sunset"] .sidebar #nav > .nav-parent.open {
  color: var(--ink);
  background: var(--sidebar-panel);
  border-color: var(--line);
}

html[data-theme="light"] .sidebar .nav-button:hover,
html[data-theme="light"] .sidebar .nav-button.active,
html[data-theme="terra"] .sidebar .nav-button:hover,
html[data-theme="terra"] .sidebar .nav-button.active,
html[data-theme="sakura"] .sidebar .nav-button:hover,
html[data-theme="sakura"] .sidebar .nav-button.active,
html[data-theme="sunset"] .sidebar .nav-button:hover,
html[data-theme="sunset"] .sidebar .nav-button.active {
  color: var(--ink);
  background: var(--hover);
}