/* Shared palette values are supplied by appearance.mjs to both UI and PNG renderer. */
:root[data-theme]{
  color-scheme:light;
  --ink:var(--heading);--green:var(--accent);--soft-green:var(--accent-soft);--lime:var(--accent-soft);
  --amber:var(--muted);--soft-amber:var(--accent-faint);--purple:var(--accent);--soft-purple:var(--accent-soft);
  --shadow:0 16px 70px #00000024;
}
:root[data-mode=dark]{color-scheme:dark}
:root[data-theme] ::selection{background:var(--accent-border);color:var(--heading)}
:root[data-theme] button:focus-visible,:root[data-theme] a:focus-visible{outline-color:var(--accent)}
:root[data-theme] input:focus,:root[data-theme] textarea:focus,:root[data-theme] select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
:root[data-theme] .sidebar{background:var(--sidebar);color:var(--sidebar-text)}
:root[data-theme] .project-switch{color:var(--sidebar-text)}
:root[data-theme] .private-dot{background:var(--sidebar-muted)}
:root[data-theme] .drawer{box-shadow:-15px 0 70px #00000024}
:root[data-theme] dialog::backdrop{background:#00000070}
:root[data-theme] .export-preview img{box-shadow:0 7px 25px #00000018}
:root[data-theme] .missing-cell small{color:var(--muted)}
:root[data-theme] .brand,:root[data-theme] .sidebar-note p{color:var(--sidebar-text)}
:root[data-theme] :is(.brand-small,.sidebar-label,.local-status small,.version,.tiny-cross,.nav-link,.project-switch:before){color:var(--sidebar-muted)}
:root[data-theme] .sidebar-note>span:last-child{color:var(--sidebar-muted)}
:root[data-theme] .nav-link.active{background:var(--accent-soft);color:var(--accent)}
:root[data-theme] .status-light{background:var(--sidebar-muted)}
:root[data-theme] .nav-count{background:var(--accent-faint)}
:root[data-theme] .sidebar .nav-count{background:var(--accent-soft);color:var(--accent);font-weight:700}
:root[data-theme] .topbar{background:var(--paper)}
:root[data-theme] .avatar{background:transparent}
:root[data-theme] .btn{border-color:var(--line)}
:root[data-theme] :is(.btn:hover,.icon-button:hover,.design-row:hover){background:var(--surface-hover)}
:root[data-theme] .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
:root[data-theme] .btn.primary:hover{background:var(--accent-hover)}
:root[data-theme] .btn.soft{background:var(--paper)}
:root[data-theme] .btn.lime{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent)}
:root[data-theme] .pipeline{background:var(--accent-soft);border-color:var(--accent-border)}
:root[data-theme] .stage.current .stage-dot{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
:root[data-theme] .pipeline-arrow{background:var(--accent-border)}
:root[data-theme] :is(.pipeline-steps,.pipeline-note,.icon-button,.metric-top,.metric-bottom,.metric-number small,.panel-title small,.list-tab,.list-foot,.row-subtitle,.row-copy small,.row-specs small,.row-cell-label,.child-line,.workspace-footer,.field>label,.field>.field-label,.field small,.help-text,.inline-check,.status-box p,.status-box h3,.timeline-entry small,.timeline-entry p,.modal-description,.section-heading p,.kanban-card p,.kanban-card .code,.column-title,.board-note,.payment-summary p,.fee-row small,.fee-pending,.private-banner,.history-card p,.backup-card p,.project-option small,.archive-list-title,.export-controls>p,.export-controls small,.preview-placeholder,.button-link,.filter-info,.project-empty p,.initial-loading){color:var(--muted)}
:root[data-theme] .column-title span:last-child{color:var(--muted)}
:root[data-theme] .stage.current,:root[data-theme] .stage.done,:root[data-theme] .list-tab.active{color:var(--accent)}
:root[data-theme] .metric{background:var(--paper)}
:root[data-theme] .metric:hover,:root[data-theme] .kanban-card:hover{border-color:var(--accent-border)}
:root[data-theme] .metric-number{color:var(--heading)}
:root[data-theme] .metric-line{background:var(--surface)}
:root[data-theme] .metric-line span{background:var(--accent)}
:root[data-theme] .metric.warn{background:var(--accent-faint)}
:root[data-theme] .metric.warn .metric-top,:root[data-theme] .metric.warn .metric-number{color:var(--accent)}
:root[data-theme] .metric.warn .metric-line{background:var(--accent-soft)}
:root[data-theme] .metric.warn .metric-line span{background:var(--accent)}
:root[data-theme] :is(.search,.list-foot,.fee-row.header,.kanban-column,.path-info,.segment,.drawer,.modal,.editor-tabs,.drawer-footer,.export-dialog,.export-preview-area,.preview-toolbar){background:var(--surface)}
:root[data-theme] .search .icon,:root[data-theme] .fee-row.header,:root[data-theme] .path-info,:root[data-theme] .preview-toolbar{color:var(--muted)}
:root[data-theme] .list-labels{background:var(--accent-soft);color:var(--accent)}
:root[data-theme] :is(.list-tab .count,.backup-card .big-icon,.preview-width button.active){background:var(--accent-soft);color:var(--accent)}
:root[data-theme] .table-scroll :is(.row-main .row-title,.row-content,.row-specs){color:var(--heading)}
:root[data-theme] .table-scroll .row-notes,:root[data-theme] .row-copy{color:var(--text)}
:root[data-theme] .table-scroll .row-code{color:var(--muted)}
:root[data-theme] .row-title button:hover{color:var(--accent)}
:root[data-theme] .table-scroll .missing-cell{background:var(--accent-faint);border-color:var(--accent-border);color:var(--muted)}
:root[data-theme] :is(.design-row,.panel-toolbar,.list-tabs,.list-labels,.drawer-head,.editor-tabs,.form-section,.drawer-footer,.fee-row,.children-list,.eyebrow .demo-badge){border-color:var(--line)}
:root[data-theme] :is(.eyebrow .demo-badge,.empty,.empty h3,.empty .empty-symbol){color:var(--muted)}
:root[data-theme] .table-scroll{scrollbar-color:var(--muted) var(--surface)}
:root[data-theme] .field input,:root[data-theme] .field textarea,:root[data-theme] .field select,:root[data-theme] .kanban-card{border-color:var(--line)}
:root[data-theme] .field.has-missing input,:root[data-theme] .field.has-missing textarea,:root[data-theme] .field.has-missing select{background:var(--accent-faint);border-color:var(--accent-border)}
:root[data-theme] :is(.form-notice,.drawer-group-note,.feedback-text,.fee-total-box,.export-complete,.export-privacy,.project-option.active){background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent)}
:root[data-theme] .quote-summary{background:var(--sidebar)}
:root[data-theme] .quote-summary h2{color:var(--sidebar-text)}
:root[data-theme] .quote-summary .eyebrow,:root[data-theme] .quote-summary p{color:var(--sidebar-muted)}
:root[data-theme] .fee-row .fee-value,:root[data-theme] .path-info strong{color:var(--accent)}
:root[data-theme] .export-controls{background:var(--paper)}
:root[data-theme] .export-privacy.partner{background:var(--sidebar);border-color:var(--sidebar);color:var(--sidebar-text)}
:root[data-theme] .segment button{color:var(--muted)}
:root[data-theme] .segment button.active{background:var(--paper);color:var(--heading)}
:root[data-theme] .preview-width button{color:var(--muted)}
:root[data-theme] .toast{background:var(--sidebar);color:var(--sidebar-text)}
:root[data-theme] .pill.missing,:root[data-theme] .pill.requirement-confirmed{background:var(--accent-soft);color:var(--accent)}
:root[data-theme] .editor-tabs button{color:var(--muted)}
:root[data-theme] .editor-tabs button.active{color:var(--accent)}
/* Semantic colors remain independent of hue; gray theme uses the same labels in grayscale. */
:root[data-theme] :is(.pill.todo,.status-select.todo){background:var(--progress-todo-bg);color:var(--progress-todo-ink)}
:root[data-theme] :is(.pill.pending,.priority.unset,.priority-select.unset){background:var(--priority-unset-bg);color:var(--priority-unset-ink)}
:root[data-theme] :is(.priority.high,.priority-select.high){background:var(--priority-high-bg);color:var(--priority-high-ink)}
:root[data-theme] :is(.priority.medium,.priority-select.medium){background:var(--priority-medium-bg);color:var(--priority-medium-ink)}
:root[data-theme] :is(.priority.low,.priority-select.low){background:var(--priority-low-bg);color:var(--priority-low-ink)}
:root[data-theme] :is(.pill.designing,.status-select.designing){background:var(--progress-designing-bg);color:var(--progress-designing-ink)}
:root[data-theme] :is(.pill.revision,.status-select.revision){background:var(--progress-revision-bg);color:var(--progress-revision-ink)}
:root[data-theme] :is(.pill.approved,.status-select.approved){background:var(--progress-approved-bg);color:var(--progress-approved-ink)}
:root[data-theme] .pill.submitted{background:var(--progress-submitted-bg);color:var(--progress-submitted-ink)}
:root[data-theme] .timeline-entry:before{background:var(--muted)}
:root[data-theme] :is(.field .required-tag,.row-alerts,.row-alerts button.row-alert){color:var(--accent)}
:root[data-theme] .row-alert:before{background:var(--accent)}
:root[data-theme] .stage-dot{border-color:var(--line)}
:root[data-theme] :is(.breadcrumb>span,.project-meta .separator){color:var(--muted)}
:root[data-mode=dark] dialog::backdrop{background:#000000a8}
:root[data-theme] #save-warning{background:var(--accent-soft);color:var(--heading);border-color:var(--accent-border)}
:root[data-theme] .toast.error{background:var(--sidebar);color:var(--sidebar-text)}
:root[data-theme=gray]{--red:var(--text)}

:root[data-theme] .nav-link{transition:background .15s}

.appearance-controls{display:flex;align-items:center;gap:8px}
.brand-mark{flex-shrink:0;object-fit:contain}
.theme-trigger,.mode-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;border:1px solid var(--line);background:var(--paper);border-radius:7px;color:var(--text);font-size:12px;padding:0 11px;white-space:nowrap}
.theme-trigger:hover,.mode-toggle:hover{background:var(--surface-hover)}
.theme-trigger .icon{width:13px;height:13px;color:var(--muted)}
#theme-current-name{color:var(--muted);font-size:11px}
.theme-current-swatch{width:13px;height:13px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 3px var(--accent-soft)}
.mode-toggle{width:36px;padding:0}.mode-toggle .icon{width:18px;height:18px}.sun-icon{display:none}
[data-mode=dark] .sun-icon{display:block}[data-mode=dark] .moon-icon{display:none}
.appearance-panel{position:fixed;inset:76px 24px auto auto;margin:0;width:350px;max-width:calc(100vw - 28px);padding:23px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--text);box-shadow:0 16px 60px #0003;font-family:inherit}
.appearance-panel::backdrop{background:transparent}
.appearance-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.appearance-heading h2{font-size:21px;font-weight:700;color:var(--heading);margin:4px 0 0}
.appearance-eyebrow{font-size:9px;letter-spacing:1.8px;color:var(--muted)}.appearance-label{font-size:12px;color:var(--muted);margin:0 0 10px}
.theme-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:23px}
.theme-choice{position:relative;display:flex;flex-direction:column;gap:10px;align-items:flex-start;border:1px solid var(--line);padding:11px;border-radius:7px;color:var(--text);font-size:12px;text-align:left;background:var(--paper)}
.theme-choice:hover{background:var(--surface)}.theme-choice[aria-pressed=true]{background:var(--accent-faint);border-color:var(--accent)}
.theme-sample{display:flex;height:23px;border-radius:4px;overflow:hidden;width:100%}.theme-sample i:nth-child(1){width:40%;background:var(--sample-main)}.theme-sample i:nth-child(2){width:35%;background:var(--sample-soft)}.theme-sample i:nth-child(3){width:25%;background:var(--sample-light)}
.sample-blue{--sample-main:#002fa7;--sample-soft:#8ea9f1;--sample-light:#eaf0ff}.sample-green{--sample-main:#157259;--sample-soft:#87baa2;--sample-light:#e8f3ed}.sample-orange{--sample-main:#b95a20;--sample-soft:#e8af7c;--sample-light:#fff0df}.sample-gold{--sample-main:#211e18;--sample-soft:#b9954d;--sample-light:#f0e6ce}.sample-purple{--sample-main:#7955ad;--sample-soft:#c7afe5;--sample-light:#f0e8fa}
.theme-check{position:absolute;right:10px;bottom:10px;color:var(--accent);visibility:hidden}.theme-choice[aria-pressed=true] .theme-check{visibility:visible}
.appearance-modes{display:flex;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:7px;gap:5px}.appearance-modes button{width:50%;border-radius:5px;padding:8px;font-size:12px;color:var(--muted)}.appearance-modes button[aria-pressed=true]{background:var(--paper);color:var(--accent);box-shadow:0 1px 5px #0001}
.appearance-note{font-size:11px;color:var(--muted);line-height:1.8;margin:17px 0 0}
@media(max-width:760px){.topbar-right{gap:8px}#theme-current-name{display:none}.appearance-panel{inset:66px 14px auto auto;max-height:calc(100dvh - 80px);overflow:auto}.theme-trigger{padding:0 10px}}

.sample-gray{--sample-main:#303030;--sample-soft:#aaaaaa;--sample-light:#eeeeee}