/* Shared by every canvas level, dialog, drawer, and interaction state. */
:root {
  --accent: #b4481c;
  --accent-strong: #8f3615;
  --accent-soft: #f7e5d5;
  --accent-line: #dbb18e;
  --on-accent: #fffaf5;
  --surface: #fcfaf4;
  --surface-muted: #f5f0e7;
  --border: #d8cfc3;
  --border-strong: #bbaa97;
  --ink-soft: #45443d;
  --muted: #69645b;
  --ready: #9a8b79;
}

::selection { background: var(--accent-soft); color: var(--ink); }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.staff-placement select:focus-visible, .staff-provider-card input:focus-visible, .staff-provider-card button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
input[type=checkbox], input[type=radio], .tool-selection input, .staff-kit-options input, .staff-provider-card input { accent-color: var(--accent); }

/* Shared surfaces keep the interface quiet; project colors identify projects. */
.inspector, .attention-panel, .result-sheet, .work-manager, .work-detail,
.room-tools-dialog, .staff-floor-dialog, .staff-kit, .staff-kit-person,
.staff-pool-launcher { background: var(--surface); border-color: var(--border); }
.work-manager-heading, .work-queue, .staff-floor-board, .integration-preview { background-color: var(--surface-muted); }
.attention-panel, .result-sheet { border-top-color: var(--accent); }
.inspector-top, .inspector-copy, .inspector-note, .attention-panel > p,
.work-manager-heading p, .work-manager-heading .eyebrow, .work-row-project, .work-row-owner,
.staff-floor-header p, .staff-floor-header .eyebrow, .staff-member small, .staff-member i,
.staff-kit-person p, .staff-provider-card small, .staff-kit-options small, .staff-kit-note,
.room-tools-dialog header p, .room-tools-body p, .room-tools-dialog > footer p { color: var(--muted); }
.inspector h2, .staff-floor-header h2, .staff-kit-person h3, .staff-integrations h3,
.staff-pool-launcher strong, .staff-member strong, .staff-provider-card strong,
.staff-kit-options strong, .staff-kit-options legend, .staff-placement,
.room-tools-dialog h2, .tool-selection label strong { color: var(--ink); }

/* One primary-action color throughout the demo. */
.inspector-action, .next-button, .review-actions button, .work-input-actions [data-work-add-input],
.work-input-actions [data-work-approve], .room-tools-dialog [data-save-tools], .staff-save {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: none;
}
.inspector-action:hover, .next-button:hover, .review-actions button:hover,
.work-input-actions [data-work-add-input]:hover, .work-input-actions [data-work-approve]:hover,
.room-tools-dialog [data-save-tools]:hover, .staff-save:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.review-actions [data-send-back], .review-actions [data-mid-return], .work-input-actions [data-work-return] {
  background: var(--surface); color: var(--accent-strong); border-color: var(--accent-line);
}
.review-actions [data-send-back]:hover, .review-actions [data-mid-return]:hover, .work-input-actions [data-work-return]:hover { background: var(--accent-soft); }
.inspector-setup-button, .inspector-tool-button, .room-tool-callout button,
.work-placement button, .staff-floor-header > button, .staff-resource-action {
  background: var(--surface); color: var(--ink-soft); border-color: var(--border);
}
.room-flow button, .sample-task, .attention-request { background: var(--accent-soft); color: var(--ink-soft); border-color: var(--accent-line); }
.attention-request b { color: var(--accent-strong); }
.attention-request small { color: var(--muted); }
.human-gate, .detail-map .human-gate {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-strong);
}
.human-gate > .eyebrow, .human-gate > span:not(.eyebrow), .human-gate > b,
.detail-map .human-gate > span:not(.eyebrow) { color: var(--accent-strong); }
.result-sheet .draft-tag { background: var(--accent-soft); color: var(--accent-strong); }

/* Selection, status, and native controls also follow the same palette. */
.view-switch button[aria-pressed=true], .project-toolbar .scenario-switch button[aria-pressed=true],
.work-manager-tools nav button[aria-pressed=true], .staff-kit-tabs button[aria-pressed=true],
.staff-member[aria-pressed=true], .staff-resource-action[aria-pressed=true], .staff-provider-card:has(input:checked) {
  background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-line); box-shadow: none;
}
.work-row[aria-pressed=true] { background: var(--accent-soft); border-color: var(--accent-line); box-shadow: inset 3px 0 var(--accent); }
.work-status.progress { background: var(--surface-muted); color: var(--ink-soft); }
.work-status.attention { background: var(--accent-soft); color: var(--accent-strong); }
.work-status:not(.complete):not(.attention):not(.progress) { background: var(--surface-muted); color: var(--muted); }
.staff-provider-card:hover, .staff-provider-grid .staff-provider-card button:hover,
.staff-provider-grid .staff-provider-card button[aria-expanded=true] { background: var(--accent-soft); color: var(--accent-strong); }
.staff-provider-mark, .staff-resource-icon { background: var(--surface-muted); border-color: var(--border); color: var(--ink-soft); }
.staff-integration-detail { background: var(--surface-muted); border-color: var(--border-strong); }
.staff-integration-detail h4 { color: var(--accent-strong); }
.staff-placement select { background-color: var(--surface); border-color: var(--border); color: var(--ink-soft); }
.staff-placement select:hover, .staff-placement select:open, .staff-placement option:checked,
.staff-placement option:hover, .staff-placement option:focus { background-color: var(--accent-soft); border-color: var(--accent-line); color: var(--ink-soft); }
@supports (appearance: base-select) {
  .staff-placement select::picker(select) { background: var(--surface); border-color: var(--border); color: var(--ink-soft); scrollbar-color: var(--border-strong) transparent; }
  .staff-placement select::picker-icon { border-color: var(--ink-soft); }
  .staff-placement option::checkmark { color: var(--accent); }
}

/* Attention and supporting cards use warm brand tones rather than separate UI palettes. */
.needs-toggle b, .needs-tag, .room-question, .work-decision, .checkpoint-tag {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-strong);
}
.overview-status-row > button:hover, .overview-status-row > button[aria-expanded=true],
body[data-canvas-mode=overview] .overview-status-row > button:last-child { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-strong); }
.work-placement, .work-definition, .room-reference .context-pocket, .handoff-package,
.staff-resources { background: var(--surface-muted); border-color: var(--border); }
.staff-detail, .room-reference, .work-manager-heading, .work-manager-tools, .work-queue,
.work-input-box, .work-history-section, .work-manager-footnote, .staff-floor-header,
.staff-kit, .staff-kit-tabs, .staff-kit-options label, .staff-provider-grid, .staff-provider-card,
.staff-floor-footer, .room-tools-dialog > header, .room-tools-dialog > footer, .integration-preview,
.integration-example { border-color: var(--border); }
.room-reference summary, .work-definition summary, .work-placement strong { color: var(--ink-soft); }
.staff-detail span, .room-question + .staff-detail span, .work-placement small,
.work-manager-footnote, .staff-board-label, .staff-floor-note, .staff-floor-footer,
.staff-resource-action em, .staff-resource-action small, .staff-toolkit-summary,
.inspector-tool-button [data-inspector-tool-count], .work-input-box > small { color: var(--muted); }
.tool-preview-tag, .integration-preview .tool-preview-tag { background: var(--surface); border-color: var(--border); color: var(--accent-strong); }
.integration-example > span { border-color: var(--border-strong); color: var(--ink-soft); }