:root {
	--charcoal: #0D0D12;
	--panel: #1A1B22;
	--light-gray: #C8CACE;
	--muted-gray: #A8ABB2;
	--cobalt: #2563EB;
	--type-xs: 11px;
	--type-sm: 13px;
	--type-body: 16px;
	--type-heading: 24px;
	--type-display: 56px;
}

body { background:var(--charcoal); color:var(--light-gray); }
.brand-mark { background:var(--cobalt); color:var(--light-gray); font-size:var(--type-body); }
.feature-icon { background:var(--charcoal); color:var(--cobalt); }
.task-check { color:var(--cobalt); }
.search-input,.roadmap-panel,.data-card,.summary-card { background:var(--charcoal); color:var(--light-gray); border-color:var(--muted-gray); }
.roadmap-panel span,.status-row span { color:var(--muted-gray); border-color:var(--muted-gray); }

/* Dashboard and roadmap controls use the same five-size scale. */
.brand { height:44px; gap:12px; font-size:28px; }
.brand .brand-mark { width:36px; height:36px; flex:none; border-radius:9px; font-size:21px; }
.icon-button,.mobile-menu { font-size:var(--type-sm); }
.page-title span,.view-toolbar strong,.data-row,.data-row strong { font-size:var(--type-body); }
.page-title small,.eyebrow,.nav-label,.nav-count,.chart-labels,.categorize { font-size:var(--type-xs); }
.feature-card h2,.report-card strong,.empty-state-large h2 { font-size:var(--type-heading); }
.feature-icon,.task-check { font-size:var(--type-body); }
.roadmap-panel strong { font-size:var(--type-sm); }
.roadmap-panel span,.status-row span,.task-row small,.transaction-note { font-size:var(--type-xs); }

/* Landing-page theme: Modern Deep Purple */
:root {
  --charcoal:#0D0D12; --panel:#16171D; --panel-card:#1A1B24; --light-gray:#C8CACE; --muted-gray:#8E929E;
  --border-subtle:rgba(110,113,120,.25); --bg:#0D0D12; --surface:#16171D; --surface-2:#1A1B24;
  --line:rgba(110,113,120,.25); --text:#C8CACE; --muted:#8E929E; --lime:#8B5CF6; --cobalt:#8B5CF6;
  --lime-deep:#16171D; --accent-hover:#7C3AED; --accent-light:rgba(139,92,246,.12); --accent-glow:rgba(139,92,246,.35);
}
html.theme-light {
  --charcoal:#F8FAFC; --panel:#FFFFFF; --panel-card:#F1F5F9; --light-gray:#0F172A; --muted-gray:#475569;
  --border-subtle:rgba(148,163,184,.3); --bg:#F8FAFC; --surface:#FFFFFF; --surface-2:#F1F5F9;
  --line:rgba(148,163,184,.3); --text:#0F172A; --muted:#475569; --lime:#8B5CF6; --cobalt:#8B5CF6;
  --lime-deep:#FFFFFF; --accent-hover:#7C3AED; --accent-light:rgba(139,92,246,.12); --accent-glow:rgba(139,92,246,.35);
}
body { background:var(--bg); color:var(--text); transition:background-color .2s ease,color .2s ease; }
.clerk-auth { display:flex; align-items:center; gap:8px; }
.clerk-sign-in,.clerk-sign-up { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 12px; border:1px solid; border-radius:6px; font:700 13px Manrope,sans-serif; line-height:1; white-space:nowrap; cursor:pointer; transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease; }
.clerk-sign-in { background:var(--cobalt); border-color:var(--cobalt); color:#fff; }
.clerk-sign-in:hover { background:var(--accent-hover); border-color:var(--accent-hover); transform:translateY(-1px); }
.clerk-sign-up { background:var(--surface-2); border-color:var(--line); color:var(--text); }
.clerk-sign-up:hover { background:var(--accent-light); border-color:var(--cobalt); color:var(--text); }
.clerk-sign-in:focus-visible,.clerk-sign-up:focus-visible { outline:3px solid var(--accent-glow); outline-offset:2px; }
.sidebar { background:var(--panel); border-color:var(--line); }
.topbar { background:color-mix(in srgb, var(--panel) 92%, transparent); border-color:var(--line); }
.panel,.metric-card { background:var(--panel-card); border-color:var(--line); }
.workspace-switcher { background:var(--surface-2); border-color:var(--line); color:var(--text); }
.nav-item { color:var(--muted); }.nav-item:hover,.nav-item.active { background:var(--accent-light); color:var(--text); box-shadow:inset 2px 0 var(--cobalt); }.nav-icon,.nav-item.active .nav-icon { color:var(--cobalt); }
.search-input,.document-note,.date-picker,.quiet-button,.file-picker-button { background:var(--surface-2); border-color:var(--line); color:var(--text); }
.icon-button,.theme-toggle { background:var(--surface-2); border-color:var(--line); color:var(--muted); }
.primary-button { background:var(--cobalt); color:#FFFFFF; box-shadow:0 0 0 1px rgba(255,255,255,.08) inset; }.primary-button:disabled { background:#68706c; color:#d3d7d5; cursor:not-allowed; opacity:.7; }.primary-button:hover { background:var(--accent-hover); }
.quiet-button:hover,.file-picker-button:hover,.file-picker-button:active { background:var(--accent-light); border-color:var(--cobalt); }
.theme-toggle { display:inline-flex; align-items:center; gap:7px; height:35px; padding:0 10px; border:1px solid; border-radius:6px; font-size:var(--type-sm); font-weight:700; transition:background-color .2s ease,border-color .2s ease,color .2s ease; }
.theme-toggle:hover { border-color:var(--cobalt); color:var(--text); }.theme-toggle-icon { color:#FCD34D; font-size:16px; line-height:1; } html.theme-light .theme-toggle-icon { color:#475569; }
.page-title small,.subtitle,.neutral,.task-row small,.transaction-note,.muted-copy { color:var(--muted); }
.nav-count { background:var(--accent-light); color:var(--cobalt); }.notification-dot { background:var(--cobalt); }
.approved { background:var(--accent-light); color:#A78BFA; }.review-status { background:rgba(245,158,11,.14); color:#FBBF24; }
html.theme-light .approved { color:#7C3AED; } html.theme-light .review-status { color:#B45309; }
.roadmap-panel,.status-row span,.category-chip { background:var(--surface-2); border-color:var(--line); color:var(--muted); }
.cash-position-card { background:linear-gradient(135deg, var(--accent-light), var(--panel-card)); border-color:rgba(139,92,246,.35); }.cash-position-card strong,.statement-line.total strong { color:#A78BFA; } html.theme-light .cash-position-card strong,html.theme-light .statement-line.total strong { color:#7C3AED; }
.upload-zone { background:var(--surface); border-color:rgba(139,92,246,.35); }.upload-zone.drag-over { border-color:var(--cobalt); background:var(--accent-light); }
.toast { background:var(--panel); color:var(--text); border:1px solid var(--line); box-shadow:0 12px 30px rgba(0,0,0,.2); }
@media (max-width:720px) { .theme-toggle-label { display:none; }.theme-toggle { width:35px; justify-content:center; padding:0; } }

/* Live accent palettes from the Wisebooks landing page */
:root { --accent-secondary:#A78BFA; --badge-border:rgba(139,92,246,.35); }
html[data-palette="cobalt"] { --lime:#2563EB; --cobalt:#2563EB; --accent-hover:#1D4ED8; --accent-light:rgba(37,99,235,.12); --accent-glow:rgba(37,99,235,.35); --accent-secondary:#60A5FA; --badge-border:rgba(37,99,235,.35); }
html[data-palette="green"] { --lime:#10B981; --cobalt:#10B981; --accent-hover:#059669; --accent-light:rgba(16,185,129,.12); --accent-glow:rgba(16,185,129,.35); --accent-secondary:#34D399; --badge-border:rgba(16,185,129,.35); }
html[data-palette="lightblue"] { --lime:#0EA5E9; --cobalt:#0EA5E9; --accent-hover:#0284C7; --accent-light:rgba(14,165,233,.12); --accent-glow:rgba(14,165,233,.35); --accent-secondary:#38BDF8; --badge-border:rgba(14,165,233,.35); }
html[data-palette="yelloworange"] { --lime:#F59E0B; --cobalt:#F59E0B; --accent-hover:#D97706; --accent-light:rgba(245,158,11,.12); --accent-glow:rgba(245,158,11,.35); --accent-secondary:#FB923C; --badge-border:rgba(245,158,11,.35); }
html[data-palette="deeppurple"] { --lime:#8B5CF6; --cobalt:#8B5CF6; --accent-hover:#7C3AED; --accent-light:rgba(139,92,246,.12); --accent-glow:rgba(139,92,246,.35); --accent-secondary:#A78BFA; --badge-border:rgba(139,92,246,.35); }
.approved { color:var(--accent-secondary); }
html.theme-light .approved { color:var(--accent-hover); }
.cash-position-card { border-color:var(--badge-border); }.cash-position-card strong,.statement-line.total strong { color:var(--accent-secondary); }
html.theme-light .cash-position-card strong,html.theme-light .statement-line.total strong { color:var(--accent-hover); }
.palette-picker { position:relative; }
.palette-trigger { display:flex; align-items:center; gap:9px; height:42px; min-width:205px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); color:var(--text); text-align:left; transition:border-color .15s ease,background-color .15s ease; }
.palette-trigger:hover,.palette-picker.open .palette-trigger { border-color:var(--cobalt); background:var(--accent-light); }
.palette-trigger-copy { display:flex; flex:1; flex-direction:column; gap:1px; min-width:0; }
.palette-trigger-copy small { color:var(--muted); font:300 9px 'DM Mono',monospace; letter-spacing:.06em; text-transform:uppercase; }
.palette-trigger-copy strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.palette-chevron { color:var(--muted); transition:transform .15s ease; }.palette-picker.open .palette-chevron { transform:rotate(180deg); }
.palette-swatch { width:12px; height:12px; flex:none; border-radius:50%; background:var(--cobalt); box-shadow:0 0 0 3px var(--accent-light); }
.active-swatch { background:var(--cobalt); }
.palette-swatch.cobalt { background:#2563EB; }.palette-swatch.green { background:#10B981; }
.palette-swatch.lightblue { background:#0EA5E9; }.palette-swatch.yelloworange { background:#F59E0B; }
.palette-swatch.deeppurple { background:#8B5CF6; }
.palette-menu { position:absolute; z-index:80; top:calc(100% + 9px); right:0; width:390px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:0 22px 55px rgba(0,0,0,.34); }
.palette-option { display:grid; grid-template-columns:16px minmax(0,1fr) 18px; gap:11px; align-items:center; width:100%; padding:13px 14px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--text); text-align:left; }
.palette-option:hover,.palette-option.selected { background:var(--accent-light); }
.palette-option:last-child { border-bottom:0; }
.palette-option > span:nth-child(2) { min-width:0; }
.palette-option strong,.palette-option small { display:block; }
.palette-option strong { font-size:13px; }.palette-option small { margin-top:3px; color:var(--muted); font-size:11px; }
.palette-option code { color:var(--text); font:500 10px 'DM Mono',monospace; }
.palette-check { visibility:hidden; color:var(--cobalt); font-weight:800; }
.palette-option.selected .palette-check { visibility:visible; }
@media (max-width:720px) {
  .palette-trigger-copy,.palette-chevron { display:none; }
  .palette-trigger { width:35px; min-width:35px; height:35px; justify-content:center; padding:0; }
  .palette-menu { position:fixed; top:58px; right:12px; width:min(390px,calc(100vw - 24px)); }
}