:root{
  --accent:var(--yellow,#ffd900);
  --on-accent:#111820;
  --on-ink:#fff;
  --success:#16804a;
  --warning:#a66f00;
  --danger:#bc2533;
  --info:#1675a8;
  --surface-alt:color-mix(in srgb,var(--ink) 4%,var(--surface));
  --accent-soft:color-mix(in srgb,var(--accent) 20%,var(--surface));
  --success-soft:color-mix(in srgb,var(--success) 14%,var(--surface));
  --warning-soft:color-mix(in srgb,var(--warning) 14%,var(--surface));
  --danger-soft:color-mix(in srgb,var(--danger) 12%,var(--surface));
  --info-soft:color-mix(in srgb,var(--info) 12%,var(--surface));
  --overlay:color-mix(in srgb,var(--ink) 58%,transparent);
}

body{background:var(--bg);color:var(--ink)}
.card,.side-nav,dialog,.panel-modal>form,.drawing-3d-modal>section{background:var(--surface);color:var(--ink);border-color:var(--line)}
input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea{background:var(--surface);color:var(--ink);border-color:var(--line)}
input[type=checkbox],input[type=radio],progress{accent-color:var(--accent)}

.button.yellow,button.yellow,.rfq-submit,.approval-notice-dialog button,.approval-decision-dialog button[value=confirm],
.drawing-footer .button.yellow,.front-create-dialog button[type=submit],.panel-modal button[type=submit],
form button[type=submit]:not(.danger):not(.appointment-approve):not(.appointment-reject):not(.approval-action-approve):not(.approval-action-reject){
  background:var(--accent);color:var(--on-accent);border-color:var(--accent)
}
.button:not(.yellow):not(.danger):not(.ghost),.nav-notifications.button{
  background:var(--ink);color:var(--on-ink);border-color:var(--ink)
}
.button.ghost,.catalog-actions .ghost,.icon-button,.menu-close,.catalog-icon{
  background:var(--surface);color:var(--ink);border-color:var(--line)
}
.button.danger,.icon-button.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.portal-power{background:var(--surface);color:var(--danger);border-color:var(--line)}

.nav a.active,.family-toggle.active,.nav-family-items a.active,.system-tabs a.active,
.project-tabs a.active,.sales-tabs a.active,[role=tab][aria-selected=true],[aria-current=page].tab,
.catalog-color-options input:checked+span{
  background:var(--accent-soft);color:var(--ink);border-color:var(--accent);box-shadow:inset 0 -2px var(--accent)
}
.module-card i,.approval-avatar,.wa-thread.active{border-color:var(--accent);background:var(--accent-soft)}
.wa-thread.active{box-shadow:inset 3px 0 var(--accent)}

.badge.pending,[data-approval-state=pending],[data-approval-state=blocked],[data-approval-state=sent],.notice.warning{background:var(--warning-soft);color:var(--warning)}
.badge.confirmed,.badge.completed,[data-approval-state=approved],[data-approval-state=accepted],.notice.success{background:var(--success-soft);color:var(--success)}
.badge.cancelled,[data-approval-state=rejected],[data-approval-state=failed],.notice.error{background:var(--danger-soft);color:var(--danger)}
.notice.info{background:var(--info-soft);color:var(--info)}
.appointment-approve,.approval-action-approve{background:var(--success-soft);color:var(--success);border-color:var(--success)}
.appointment-reject,.approval-action-reject{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
.appointment-withdraw,.approval-action-withdraw{background:var(--warning-soft);color:var(--warning);border-color:var(--warning)}

html body .drawing-primary,html body .front-form>.drawing-primary{background:var(--accent)!important;color:var(--on-accent)!important;border-color:var(--accent)!important}
html body .drawing-stepper a.active span{background:var(--accent-soft);color:var(--ink);border-color:var(--accent)}
html body .drawing-stepper a.done span{background:var(--success-soft);color:var(--success);border-color:var(--success)}
html body .choice input:checked+span,html body .drawing-series-option input:checked+span{background:var(--accent-soft);color:var(--ink);border-color:var(--accent)}
html body .drawing-top{background:var(--surface);color:var(--ink);border-color:var(--line)}
html body .drawing-top>a,html body .drawing-tools>button{background:var(--accent-soft);color:var(--ink);border-color:var(--accent)}
html body .drawing-options>section,html body .front-form>section,html body .drawing-home,html body .drawing-workspace,html body .drawing-system,html body .drawing-footer{background:var(--surface);color:var(--ink);border-color:var(--line)}
html body .project-detail-header .project-tabs .button[aria-current=page]{background:var(--accent-soft)!important;color:var(--ink)!important;border-color:var(--accent)!important}
html body .count-document-tabs a[aria-current=page]{color:var(--ink);border-bottom-color:var(--accent);background:var(--accent-soft)}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--accent);outline-offset:2px}
dialog::backdrop,.menu-overlay,.panel-modal,.drawing-3d-modal{background:var(--overlay)}