/* BuildYourSystem 0.7 — a paired surface/foreground contract.
   Loaded last so legacy literal white backgrounds cannot inherit white text.
   No user content, imagery, saved palettes or print colors are rewritten. */
:root {
  --control-bg: var(--surface,#fff);
  --control-fg: var(--ink,#111c35);
  --control-hover: var(--soft,#eaf0ff);
  --focus-ring: var(--primary,#2e4bc0);
  --raised-shadow: 0 18px 48px #0915290c;
}
html[data-mode="dark"] {
  color-scheme:dark;
  --bg:#0e1628;--surface:#17223a;--soft:#202e4b;--ink:#f2f5ff;
  --muted:#bcc9e2;--line:#334567;--primary:#9eb1ff;--on-primary:#111827;
  --white:var(--surface);--green:#8fe0c0;--red:#ffadb9;--amber:#f4cc87;
  --raised-shadow:0 18px 48px #02060e40;
}
html[data-mode="light"]{color-scheme:light}
body{background:var(--bg);color:var(--ink)}
a,button,input,textarea,select{ -webkit-tap-highlight-color:transparent }
.btn,button.btn,a.btn {background:var(--control-bg);color:var(--control-fg);border-color:var(--line)}
.btn:hover,button.btn:hover,a.btn:hover {background:var(--control-hover);color:var(--control-fg)}
.btn.primary,button.btn.primary,a.btn.primary {background:var(--primary);border-color:var(--primary);color:var(--on-primary,#fff)}
.btn.primary:hover,button.btn.primary:hover,a.btn.primary:hover {background:color-mix(in srgb,var(--primary) 91%,var(--surface));color:var(--on-primary,#fff);border-color:var(--primary)}
.btn.soft {background:var(--soft);color:var(--primary);border-color:var(--line)}
.btn.ghost {background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--soft);color:var(--ink)}
.btn:disabled,button:disabled{opacity:.58;cursor:not-allowed;transform:none!important}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),textarea,select {
  background:var(--surface);color:var(--ink);border-color:var(--line);caret-color:var(--primary)
}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.9}
select option,select optgroup{background:var(--surface);color:var(--ink)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus {
  -webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--surface) inset;caret-color:var(--ink)
}
input[type=file]::file-selector-button{background:var(--soft);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:8px 12px;margin-inline-end:10px;font:inherit}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--primary)}
::selection{background:var(--primary);color:var(--on-primary,#fff)}
.card,.modal,.select-card,.workspace-switch,.sidebar,.integration-card,.theme-card,.project-card,.product-admin-card,.search-result,.toolbar-search input,.chip {
  background:var(--surface);color:var(--ink);border-color:var(--line)
}
.topbar{background:color-mix(in srgb,var(--surface) 94%,transparent);color:var(--ink);border-color:var(--line)}
.modal-overlay{background:#060c1e99;backdrop-filter:blur(5px)}
.modal-head,.modal-footer,.form-section-label,.divider,.table-footer{border-color:var(--line)}
.modal-head h2,.modal-head h3,.form-section-label,.form-section-label strong,.field-title{color:var(--ink)}
.muted,.subtext,.heading-meta,.stat-foot,.stat-top .label,.chart-legend,.table .subtext,.table-footer,.project-card .domain,.project-metrics small,.activity-item small,.workspace-bottom,.sidebar-footer,.integration-card p,.empty-state p,.form-help,.field-help{color:var(--muted)}
.eyebrow,.nav-section,.breadcrumb,.breadcrumb strong,.language-button{color:var(--muted)}
.nav-link{color:var(--muted)}
.nav-link:hover,.nav-link.active,.chip.active,.select-card.selected{background:var(--soft);color:var(--primary);border-color:var(--line)}
.nav-link .nav-count{background:var(--soft);color:var(--ink)}
.search-trigger,.search-trigger kbd,.path-display,.tip-row{background:var(--soft);color:var(--muted);border-color:var(--line)}
.table,.table td{color:var(--ink);border-color:var(--line)}
.table th,table thead th{background:var(--soft);color:var(--ink);border-color:var(--line)}
.table tbody tr:hover{background:color-mix(in srgb,var(--soft) 55%,var(--surface))}
.table tfoot td,.table tfoot th{background:var(--soft);color:var(--ink);border-color:var(--line)}
.table input,.table select{background:var(--surface)}
.badge,.badge.outline{background:var(--soft);color:var(--ink);border-color:var(--line)}
.notice{background:var(--soft);color:var(--ink);border-color:var(--line)}
.progress-track,.ratio-track,.activity-item .activity-dot:after{background:var(--soft)}
.progress-track i{background:var(--primary)}
.avatar,.ux-avatar,.selected-tick{background:var(--soft);color:var(--primary)}
.toast{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--raised-shadow)}
html[data-mode=dark] .badge.green,html[data-mode=dark] .icon-tile.green,html[data-mode=dark] .notice.success{background:#163c33;color:#a5efd1;border-color:#2d6454}
html[data-mode=dark] .badge.blue,html[data-mode=dark] .icon-tile.blue{background:#233c63;color:#c6d9ff;border-color:#45608a}
html[data-mode=dark] .badge.red,html[data-mode=dark] .notice.error,html[data-mode=dark] .btn.danger,html[data-mode=dark] .form-error{background:#41202d;color:#ffc0cc;border-color:#77404f}
html[data-mode=dark] .badge.amber,html[data-mode=dark] .notice.warning,html[data-mode=dark] .icon-tile.amber{background:#3a3020;color:#ffdc9b;border-color:#78623d}
html[data-mode=dark] .badge.purple,html[data-mode=dark] .icon-tile.purple{background:#34294d;color:#ddc6ff;border-color:#64547e}
html[data-mode=dark] .icon-tile.pink{background:#472738;color:#ffc7e1}
html[data-mode=dark] .icon-tile.gray{background:var(--soft);color:var(--muted)}
html[data-mode=dark] .test-banner,html[data-mode=dark] .access-banner{background:#302c1d;color:#ffdc9b;border-color:#665e3b}
html[data-mode=dark] .wizard-step.active b{background:var(--primary);color:var(--on-primary,#111827)}
html[data-mode=dark] .wizard-step.done b{background:#163c33;color:#a5efd1;border-color:#2d6454}
html[data-mode=dark] .wizard-step{color:var(--muted)}
html[data-mode=dark] .wizard-step.active{color:var(--ink)}
html[data-mode=dark] .secret-state,html[data-mode=dark] .stat-foot .green{color:#a5efd1}
/* Public marketing site: explicitly pair button foregrounds, including hover/focus. */
.clarity-landing .btn:not(.primary):not(.soft),.clarity-landing .btn:not(.primary):not(.soft):visited{background:var(--surface);color:var(--ink)}
.clarity-landing .btn:not(.primary):hover{background:var(--soft);color:var(--ink)}
.clarity-request .card,.clarity-type,.clarity-float-card{background:var(--surface);color:var(--ink);border-color:var(--line)}
.clarity-header,.clarity-footer{border-color:var(--line)}
.clarity-pill,.clarity-promises,.clarity-step p,.clarity-type p,.clarity-request small,.clarity-footer p{color:var(--muted)}
.clarity-type>span{color:var(--primary)}
.clarity-console{background:var(--surface);border-color:var(--line);color:var(--ink)}
.clarity-console-top{background:var(--soft);color:var(--muted);border-color:var(--line)}
.clarity-console-body,.clarity-mini-content{background:var(--surface);color:var(--ink)}
.clarity-mini-sidebar,.clarity-mini-actions>div,.clarity-mini-bottom{background:var(--soft);color:var(--ink);border-color:var(--line)}
.clarity-mini-sidebar span,.clarity-mini-bottom>span{color:var(--primary)}
.clarity-mini-bottom strong,.clarity-console h3{color:var(--ink)}
/* The same component contract is used throughout the administration workspace. */
.hub-dashboard .hub-welcome{background:linear-gradient(125deg,var(--surface),var(--soft));color:var(--ink);border-color:var(--line)}
.hub-dashboard .hub-welcome h1,.hub-dashboard .hub-card-heading h3,.hub-dashboard .hub-project h3{color:var(--ink)}
.hub-dashboard .hub-welcome p,.hub-overline,.hub-nav-intro,.hub-sidebar-note p,.hub-brand small{color:var(--muted)}
.hub-nav-icon,.hub-quick .icon-medallion,.hub-stat .icon-medallion{color:var(--hub-accent,var(--primary));background:var(--soft)}
.hub-primary-link.active{background:var(--soft);color:var(--primary)}
.hub-primary-link.active .hub-nav-icon{background:var(--primary);color:var(--on-primary,#fff)}
.hub-primary-link small,.hub-quick small,.hub-project-owner,.hub-domain{color:var(--muted)}
.hub-project-logo,.hub-filter,.hub-subnav,.hub-payment-strip,.hub-stat,.hub-quick,.hub-type,.hub-theme-info,.hub-sidebar-note{background:var(--surface);color:var(--ink);border-color:var(--line)}
.hub-subnav a{color:var(--muted)}
.hub-subnav a.active,.hub-subnav a:hover{background:var(--soft);color:var(--primary)}
.hub-filter-icon,.hub-glass-plane,.hub-floating-dot{color:var(--primary)}
.hub-glass-plane{background:color-mix(in srgb,var(--surface) 88%,transparent);border-color:var(--line)}
.hub-chart .chart-summary,.chart-dates,.chart-data summary{color:var(--muted)}
.hub-chart .chart-summary strong,.chart-dates bdi{color:var(--ink)}
.hub-chart .chart-grid{stroke:var(--line)}
.hub-chart .chart-line{stroke:var(--hub-accent,var(--primary))}
.hub-chart .chart-dot{fill:var(--surface);stroke:var(--hub-accent,var(--primary))}
.hub-project-sequence,.hub-live,.hub-project-links small{color:var(--muted)}
.v6-filter,.v6-filter-panel,.v6-filter-quick,.v6-action-board,.v6-due-card,.v6-promotion-card,.v6-category-card,.v5-category-card,.studio-filter-panel,.v4-advanced-card,.hub-advanced-card{color:var(--ink);border-color:var(--line)}
.v6-filter-trigger,.v6-quick-date,.v6-filter-clear,.v6-preset{background:var(--surface);color:var(--ink);border-color:var(--line)}
.v6-quick-date.active,.v6-preset.active{background:var(--soft);color:var(--primary)}
.editor-header,.editor-sidebar,.editor-inspector,.editor-canvas-toolbar,.editor-selected-heading,.theme-studio-shell,.editor-block-item{background:var(--surface);color:var(--ink);border-color:var(--line)}
.editor-canvas{background:var(--bg)}
.editor-block-item.selected{background:var(--soft);color:var(--primary)}
.mrtech-rights{color:var(--muted)}
.mrtech-rights a{color:var(--primary)}
@media(prefers-reduced-motion:reduce){.btn,.hub-project,.hub-quick,.clarity-type{transition:none!important}}
@media print{html[data-mode=dark]{--bg:#fff;--surface:#fff;--soft:#f1f4fa;--ink:#152238;--muted:#42536c;--line:#cfd6e2;--primary:#284a91;--on-primary:#fff;color-scheme:light}}

/* Paired foreground/background switches must be atomic, including opening a modal. */
.btn,button.btn,a.btn{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
html[data-mode=light] .badge.green{background:#eaf7f2;color:#126650;border-color:#c4e5d9}
html[data-mode=light] .badge.amber{background:#fff5e5;color:#80540d;border-color:#efdcba}
html[data-mode=light] .wizard-step{color:#536278}