/* Semantic theme tokens. Loaded after component styles. */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #181818;
  --surface: #181818;
  --surface-2: #242424;
  --panel-bg: #181818;
  --ink: #F1F3F5;
  --ink-dim: #C8CDD4;
  --text-primary: #F1F3F5;
  --text-secondary: #C8CDD4;
  --text-muted: #C8CDD4;
  --line: #777777;
  --field-line: #9D9D9D;
  --line-selected: #9D9D9D;
  --control-bg: #282828;
  --control-hover: #333333;
  --surface-selected: #263B4D;
  --surface-active: #263B4D;
  --text-active: #9FC5E8;
  --line-active: #9FC5E8;
  --brass: #9FC5E8;
  --brass-ink: #152535;
  --cta-hover: #C3DCF2;
  --action-light: #F2F2F2;
  --ink-on-light: #242424;
  --state-ok: #A3D5A6;
  --state-warning: #F0CE7A;
  --state-danger: #FFAAA4;
  --danger-bg: #3B2326;
  --ok-bg: #203426;
  --accent-rgb: 159,197,232;
  --panel-rgb: 24,24,24;
  --sscp-grid: rgba(255,255,255,.1);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ECEDE8;
  --surface: #F6F7F2;
  --surface-2: #DCE1DA;
  --panel-bg: #F0F2EB;
  --ink: #172A25;
  --ink-dim: #40564A;
  --text-primary: #172A25;
  --text-secondary: #40564A;
  --text-muted: #40564A;
  --line: #899889;
  --field-line: #667D68;
  --line-selected: #667D68;
  --control-bg: #E5EAE1;
  --control-hover: #D5DFD2;
  --surface-selected: #D8E8D9;
  --surface-active: #D8E8D9;
  --text-active: #294F3D;
  --line-active: #294F3D;
  --brass: #294F3D;
  --brass-ink: #FFFFFF;
  --cta-hover: #1C3E2D;
  --action-light: #294F3D;
  --ink-on-light: #FFFFFF;
  --state-ok: #24613A;
  --state-warning: #775500;
  --state-danger: #AA2635;
  --danger-bg: #FCE8EB;
  --ok-bg: #E3F1E6;
  --accent-rgb: 41,79,61;
  --panel-rgb: 240,242,235;
  --sscp-grid: rgba(32,44,58,.15);
}
:root[data-theme="contrast"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #111111;
  --surface-2: #202020;
  --panel-bg: #000000;
  --ink: #E6DF00;
  --ink-dim: #E6DF00;
  --text-primary: #E6DF00;
  --text-secondary: #E6DF00;
  --text-muted: #E6DF00;
  --line: #E6DF00;
  --field-line: #E6DF00;
  --line-selected: #E6DF00;
  --control-bg: #000000;
  --control-hover: #282828;
  --surface-selected: #242400;
  --surface-active: #242400;
  --text-active: #E6DF00;
  --line-active: #E6DF00;
  --brass: #E6DF00;
  --brass-ink: #000000;
  --cta-hover: #FFF76A;
  --action-light: #E6DF00;
  --ink-on-light: #000000;
  --state-ok: #83FF9F;
  --state-warning: #E6DF00;
  --state-danger: #FF9090;
  --danger-bg: #320A0A;
  --ok-bg: #082310;
  --accent-rgb: 230,223,0;
  --panel-rgb: 0,0,0;
  --sscp-grid: rgba(230,223,0,.2);
}

:root { --sscp-orange: var(--brass); }
body.studio-body { background: var(--bg); }
button.cta { background: var(--brass); color: var(--brass-ink); border-color: var(--brass); }
button.cta:hover:not(:disabled) { background: var(--cta-hover); color: var(--brass-ink); }
.studio-topbar .load-unit-card.is-active .load-unit-tab,
.studio-topbar .studio-mode-switch button.is-active { background: var(--surface-active) !important; color: var(--text-active) !important; border-color: var(--line-active) !important; }
.studio-topbar .load-unit-card.is-active .load-unit-tab span,
.studio-topbar .load-unit-card.is-active .load-unit-tab strong { color: var(--text-active) !important; }
.pallet.is-selected { outline-color: var(--selection-marker); }
.pallet-stack-badge { background: var(--brass); color: var(--brass-ink); }
.theme-control { display:flex; align-items:center; gap:8px; flex:0 1 auto; min-width:0; }
.studio-topbar .topbar-main-row { flex-wrap:wrap !important; }
html { scrollbar-color:var(--line-selected) var(--panel-bg); }
:root[data-theme="light"] .studio-brand .sscp-wordmark { filter:none; }
:root[data-theme="contrast"] button:disabled { opacity:1; color:#A8A800; background:#1B1B1B; border-color:#777; }
:root[data-theme="contrast"] :is(button,input,select,textarea,a,summary,canvas,.load-stage):focus-visible { outline:3px solid var(--brass) !important; outline-offset:3px; }
:root[data-theme="contrast"] .cargo-row.is-selected { outline:2px solid var(--selection-marker); outline-offset:-2px; }
:root[data-theme="contrast"] .pallet.is-selected { outline:3px solid var(--selection-marker); outline-offset:2px; }

.pallet.is-stacked:not(.is-invalid) .pallet-stack-badge { background:var(--brass); color:var(--brass-ink); border-color:var(--brass); }

:root[data-theme="contrast"] .studio-topbar .load-unit-card.is-active .load-unit-tab,
:root[data-theme="contrast"] .studio-topbar .studio-mode-switch button.is-active { background:var(--brass) !important; color:var(--brass-ink) !important; }
:root[data-theme="contrast"] .studio-topbar .load-unit-card.is-active .load-unit-tab span,
:root[data-theme="contrast"] .studio-topbar .load-unit-card.is-active .load-unit-tab strong { color:var(--brass-ink) !important; }

.cargo-row.is-selected { outline:2px solid var(--selection-marker); outline-offset:-2px; }