/* Warehouse Web Theme System V1: colors only; layout and geometry stay owned by feature styles. */
html[data-theme="klein-cobalt"] {
  color-scheme: light;
  --color-brand-primary:#1738d1;
  --color-brand-primary-hover:#102ba8;
  --color-brand-secondary:#64779a;
  --color-brand-soft:#f0f2f7;
  --color-brand-focus:#315bea;
  --color-page-bg:#f4f5f7;
  --color-surface:#ffffff;
  --color-surface-raised:#ffffff;
  --color-surface-muted:#f7f8fa;
  --color-text-primary:#1e293b;
  --color-text-secondary:#596579;
  --color-text-muted:#677386;
  --color-text-inverse:#f7f9ff;
  --color-border:#dfe3ea;
  --color-border-strong:#cbd2dd;
  --color-border-soft:#eceff3;
  --color-divider:#e7eaef;
  --color-sidebar-bg:#18243a;
  --color-sidebar-bg-secondary:#202e47;
  --color-sidebar-text:#e7ebf2;
  --color-sidebar-text-muted:#9aa6ba;
  --color-sidebar-hover:#24334d;
  --color-sidebar-active:#2a3b58;
  --color-sidebar-active-text:#ffffff;
  --color-sidebar-indicator:#315bea;
  --color-topbar-bg:#fbfcfe;
  --color-topbar-border:#dfe3ea;
  --color-interactive-hover:#f3f5f8;
  --color-interactive-selected:#e9edf4;
  --color-focus-ring:#315bea;
  --color-link:#334f7d;
  --color-link-hover:#1738d1;
  --shadow-card:0 4px 16px rgba(28,39,61,.055);
  --shadow-popover:0 16px 38px rgba(20,30,48,.16);
  --hero-bg:#f6f7fa;
  --hero-far-mountain:#91a0bb;
  --hero-mid-mountain:#64779a;
  --hero-near-mountain:#314b73;
  --hero-far-opacity:.09;
  --hero-mid-opacity:.15;
  --hero-near-opacity:.2;
  --sidebar-ambient-color:#49617f;
  --sidebar-ambient-secondary:#7890ad;
  --sidebar-ambient-opacity:.22;
  --hero-decoration-color:var(--hero-mid-mountain);
  --hero-decoration-accent:var(--hero-near-mountain);
  --hero-decoration-opacity:var(--hero-mid-opacity);
  --chart-grid:#edf0f4;
  --chart-axis:#cfd5df;
  --chart-1:#315bea;
  --chart-2:#6b7c98;
  --chart-3:#8693a7;
  --chart-4:#716f8d;
  --chart-5:#517e7c;
  --chart-6:#9aa1ad;
  --chart-7:#887b90;
  --chart-8:#596273;
}

:root,
html[data-theme="jade-teal"] {
  --color-brand-primary:#0b655c;
  --color-brand-primary-hover:#084f49;
  --color-brand-secondary:#4b8277;
  --color-brand-soft:#eaf3f1;
  --color-brand-focus:#16796e;
  --color-page-bg:#f4f7f6;
  --color-surface:#ffffff;
  --color-surface-raised:#ffffff;
  --color-surface-muted:#f7f9f8;
  --color-text-primary:#1c2d2a;
  --color-text-secondary:#586b67;
  --color-text-muted:#687975;
  --color-text-inverse:#f4fffc;
  --color-border:#dce6e3;
  --color-border-strong:#c6d5d1;
  --color-border-soft:#e9efed;
  --color-divider:#e5ebe9;
  --color-sidebar-bg:#102c29;
  --color-sidebar-bg-secondary:#183733;
  --color-sidebar-text:#e6f0ed;
  --color-sidebar-text-muted:#9bb3ad;
  --color-sidebar-hover:#1a3a36;
  --color-sidebar-active:#1d403c;
  --color-sidebar-active-text:#ffffff;
  --color-sidebar-indicator:#4fb29b;
  --color-topbar-bg:#fbfcfc;
  --color-topbar-border:#dce6e3;
  --color-interactive-hover:#f0f5f3;
  --color-interactive-selected:#e7f0ed;
  --color-focus-ring:#16796e;
  --color-link:#315f57;
  --color-link-hover:#0b655c;
  --shadow-card:0 4px 16px rgba(20,54,48,.05);
  --shadow-popover:0 16px 38px rgba(13,43,39,.16);
  --hero-bg:#f2f6f4;
  --hero-far-mountain:#8ba9a2;
  --hero-mid-mountain:#4f7c72;
  --hero-near-mountain:#24584f;
  --hero-far-opacity:.1;
  --hero-mid-opacity:.16;
  --hero-near-opacity:.21;
  --sidebar-ambient-color:#35665c;
  --sidebar-ambient-secondary:#6d958b;
  --sidebar-ambient-opacity:.25;
  --hero-decoration-color:var(--hero-mid-mountain);
  --hero-decoration-accent:var(--hero-near-mountain);
  --hero-decoration-opacity:var(--hero-mid-opacity);
  --chart-grid:#eaf0ee;
  --chart-axis:#cbd8d4;
  --chart-1:#167568;
  --chart-2:#527f74;
  --chart-3:#63879a;
  --chart-4:#8b7b59;
  --chart-5:#43776e;
  --chart-6:#6f91a3;
  --chart-7:#918263;
  --chart-8:#526b67;
}

html[data-theme="ink-gold"] {
  --color-brand-primary:#8a5a18;
  --color-brand-primary-hover:#70450f;
  --color-brand-secondary:#c3913e;
  --color-brand-soft:#f6eedf;
  --color-brand-focus:#a97325;
  --color-page-bg:#f8f5ef;
  --color-surface:#fffdfc;
  --color-surface-raised:#ffffff;
  --color-surface-muted:#fbf8f3;
  --color-text-primary:#2c2926;
  --color-text-secondary:#756b60;
  --color-text-muted:#7a7065;
  --color-text-inverse:#fffaf2;
  --color-border:#e7ddcc;
  --color-border-strong:#d8cbb8;
  --color-border-soft:#f0e8dc;
  --color-divider:#ece2d3;
  --color-sidebar-bg:#302419;
  --color-sidebar-bg-secondary:#392b20;
  --color-sidebar-text:#f4ead9;
  --color-sidebar-text-muted:#b9a58d;
  --color-sidebar-hover:#473629;
  --color-sidebar-active:#56402b;
  --color-sidebar-active-text:#fffaf1;
  --color-sidebar-indicator:#d4aa61;
  --color-topbar-bg:#fffdfc;
  --color-topbar-border:#e7ddcc;
  --color-interactive-hover:#faf4e9;
  --color-interactive-selected:#f4e8d5;
  --color-focus-ring:#a97325;
  --color-link:#76562d;
  --color-link-hover:#8a5a18;
  --shadow-card:0 4px 16px rgba(70,49,27,.055);
  --shadow-popover:0 16px 38px rgba(55,38,22,.18);
  --hero-bg:#faf6ef;
  --hero-far-mountain:#b8a386;
  --hero-mid-mountain:#8f7352;
  --hero-near-mountain:#664a2d;
  --hero-far-opacity:.08;
  --hero-mid-opacity:.14;
  --hero-near-opacity:.19;
  --sidebar-ambient-color:#765a3b;
  --sidebar-ambient-secondary:#a78b68;
  --sidebar-ambient-opacity:.22;
  --hero-decoration-color:var(--hero-mid-mountain);
  --hero-decoration-accent:var(--hero-near-mountain);
  --hero-decoration-opacity:var(--hero-mid-opacity);
  --chart-grid:#f0e9df;
  --chart-axis:#d9cdbd;
  --chart-1:#a06b25;
  --chart-2:#ad8750;
  --chart-3:#6f7f86;
  --chart-4:#8b6d68;
  --chart-5:#7a8262;
  --chart-6:#6e7794;
  --chart-7:#9a7d58;
  --chart-8:#665d55;
}

html[data-theme="mist-slate"] {
  --color-brand-primary:#46566a;
  --color-brand-primary-hover:#364354;
  --color-brand-secondary:#7c8796;
  --color-brand-soft:#eef0f3;
  --color-brand-focus:#66768a;
  --color-page-bg:#f5f6f7;
  --color-surface:#ffffff;
  --color-surface-raised:#ffffff;
  --color-surface-muted:#f7f9fb;
  --color-text-primary:#2b333d;
  --color-text-secondary:#66717e;
  --color-text-muted:#68727d;
  --color-text-inverse:#f5f8fb;
  --color-border:#dce2ea;
  --color-border-strong:#cbd3dd;
  --color-border-soft:#e9edf2;
  --color-divider:#e3e8ee;
  --color-sidebar-bg:#222a34;
  --color-sidebar-bg-secondary:#2a3440;
  --color-sidebar-text:#e7edf4;
  --color-sidebar-text-muted:#a4b0bf;
  --color-sidebar-hover:#303b47;
  --color-sidebar-active:#35414e;
  --color-sidebar-active-text:#ffffff;
  --color-sidebar-indicator:#8496aa;
  --color-topbar-bg:#ffffff;
  --color-topbar-border:#dce2ea;
  --color-interactive-hover:#f0f3f7;
  --color-interactive-selected:#e7edf3;
  --color-focus-ring:#66768a;
  --color-link:#4e5f73;
  --color-link-hover:#3f5369;
  --shadow-card:0 4px 16px rgba(38,47,58,.05);
  --shadow-popover:0 16px 38px rgba(28,35,44,.16);
  --hero-bg:#f5f6f7;
  --hero-far-mountain:#a0a9b4;
  --hero-mid-mountain:#747f8c;
  --hero-near-mountain:#4d5b69;
  --hero-far-opacity:.08;
  --hero-mid-opacity:.14;
  --hero-near-opacity:.19;
  --sidebar-ambient-color:#52606f;
  --sidebar-ambient-secondary:#87929e;
  --sidebar-ambient-opacity:.21;
  --hero-decoration-color:var(--hero-mid-mountain);
  --hero-decoration-accent:var(--hero-near-mountain);
  --hero-decoration-opacity:var(--hero-mid-opacity);
  --chart-grid:#eceff2;
  --chart-axis:#d0d6dc;
  --chart-1:#526477;
  --chart-2:#727e8c;
  --chart-3:#6e8584;
  --chart-4:#7d7788;
  --chart-5:#8b8073;
  --chart-6:#697b8b;
  --chart-7:#858b94;
  --chart-8:#59636e;
}

:root {
  --business-action-primary:#087f5b;
  --business-action-primary-hover:#066c4d;
  --business-action-focus:#0a9068;
  --chart-1:#315bea;
  --chart-2:#4f78c8;
  --chart-3:#705fa8;
  --chart-4:#e46f1d;
  --chart-5:#087f5b;
  --chart-6:#c58a08;
  --chart-7:#d64550;
  --chart-8:#56657f;
  --status-success:#087f5b;
  --status-success-soft:#eaf8f2;
  --status-warning:#c58a08;
  --status-warning-soft:#fff7df;
  --status-caution:#e46f1d;
  --status-caution-soft:#fff0e5;
  --status-danger:#d64550;
  --status-danger-soft:#fff0f2;
  --status-neutral:#738195;
  --status-neutral-soft:#f2f5f7;
  --status-near-expiry:#d9a441;
  --ranking-first:#9c7f4a;
  --ranking-second:#7c858e;
  --ranking-third:#8e674c;
  --ranking-other:var(--color-brand-secondary);

  /* Design System V3 semantic visual aliases. Layout tokens stay outside themes. */
  --ui-surface:var(--color-surface);
  --ui-surface-raised:var(--color-surface-raised);
  --ui-surface-soft:var(--color-surface-muted);
  --ui-surface-hover:var(--color-interactive-hover);
  --ui-surface-selected:var(--color-interactive-selected);
  --ui-border:var(--color-border);
  --ui-border-strong:var(--color-border-strong);
  --ui-text-primary:var(--color-text-primary);
  --ui-text-secondary:var(--color-text-secondary);
  --ui-text-secondary-readable:var(--color-text-secondary);
  --ui-text-muted:var(--color-text-muted);
  --ui-brand:var(--color-brand-primary);
  --ui-brand-soft:var(--color-brand-soft);
  --ui-brand-hover:var(--color-brand-primary-hover);
  --ui-focus-ring:var(--color-focus-ring);
  --ui-shadow-sm:var(--shadow-card);
  --ui-shadow-md:var(--shadow-popover);

  /* Compatibility aliases keep existing pages theme-aware while migration continues. */
  --green:var(--color-brand-primary);
  --green2:var(--color-brand-secondary);
  --green-50:var(--color-brand-soft);
  --green-700:var(--color-brand-primary-hover);
  --primary:var(--color-brand-primary);
  --ink:var(--color-text-primary);
  --muted:var(--color-text-secondary);
  --line:var(--color-border);
  --bg:var(--color-page-bg);
  --blue:var(--color-brand-secondary);
  --white:var(--color-surface);
  --shadow:var(--shadow-card);
  --dashboard-success:var(--status-success);
  --dashboard-success-soft:var(--status-success-soft);
  --dashboard-warning:var(--status-warning);
  --dashboard-warning-soft:var(--status-warning-soft);
  --dashboard-caution:var(--status-caution);
  --dashboard-caution-soft:var(--status-caution-soft);
  --dashboard-danger:var(--status-danger);
  --dashboard-danger-soft:var(--status-danger-soft);
  --dashboard-neutral:var(--status-neutral);
  --dashboard-neutral-soft:var(--status-neutral-soft);
  --dashboard-finance-income:var(--status-success);
}

/* Business data identity is product semantics, not a visual theme choice. */
html[data-theme]{
  --chart-1:#315bea;
  --chart-2:#4f78c8;
  --chart-3:#705fa8;
  --chart-4:#e46f1d;
  --chart-5:#087f5b;
  --chart-6:#c58a08;
  --chart-7:#d64550;
  --chart-8:#56657f;
}

html,body{color:var(--color-text-primary);background:var(--color-page-bg)}
.brand-panel{background:linear-gradient(145deg,var(--color-sidebar-bg) 0%,var(--color-brand-primary) 68%,var(--color-brand-secondary) 100%)}
.brand-mark{color:var(--color-brand-primary)}
.login-card{background:var(--color-surface);border-color:var(--color-border);box-shadow:var(--shadow-card)}
.auth-tabs{background:var(--color-surface-muted)}
.auth-tab{color:var(--color-text-secondary)}
.auth-tab.active{background:var(--color-surface);color:var(--color-brand-primary);box-shadow:var(--shadow-card)}
.auth-form input,.field input,.field select,.field textarea,.toolbar input,.toolbar select{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}
.auth-form input:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-brand-secondary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-brand-focus) 16%,transparent)}
.sidebar{background:var(--color-sidebar-bg);color:var(--color-sidebar-text)}
.app-brand{color:var(--color-sidebar-active-text)}
.topbar{background:var(--color-topbar-bg);border-bottom-color:var(--color-topbar-border)}
.topbar h2{color:var(--color-text-primary)}
.top-actions{color:var(--color-text-secondary)}
.content{background:var(--color-page-bg)}
.primary{background:var(--business-action-primary);color:#fff}
.primary:hover{background:var(--business-action-primary-hover)}
.primary:active{background:#055c42}
.primary:focus-visible{outline-color:var(--business-action-focus)}
.primary:disabled{background:var(--business-action-primary);opacity:.48}
.secondary{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-primary)}
.secondary:hover{border-color:var(--color-brand-secondary);color:var(--color-brand-primary)}
.text-btn,.link-btn{color:var(--color-link)}
.text-btn:hover,.link-btn:hover{color:var(--color-link-hover)}
.metric,.panel,.product-card,.order-card,.location-card{background:var(--color-surface);border-color:var(--color-border);box-shadow:var(--shadow-card)}
.hero{background:linear-gradient(120deg,var(--color-brand-primary),var(--color-brand-secondary))}
.data-table th,.product-merchant-table th,.warehouse-product-table thead th{background:var(--color-surface-muted);color:var(--color-text-secondary)}
.data-table td,.data-table th,.product-merchant-table td,.product-merchant-table th,.warehouse-product-table td,.warehouse-product-table th{border-color:var(--color-divider)}
.data-table tbody tr:hover,.product-merchant-table tbody tr:hover{background:var(--color-interactive-hover)}
.warehouse-product-sku-row td{background:var(--color-surface)}
.warehouse-product-sku-row.group-continuation td:not(.product-group-cell){background:var(--color-surface-muted)}
.warehouse-product-sku-row.group-hover td,.warehouse-product-sku-row.selected td{background:var(--color-interactive-selected)}
.warehouse-product-sku-row.selected td:first-child{box-shadow:inset 3px 0 var(--color-brand-primary)}
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}

.theme-switcher{position:relative}
.theme-switcher-button{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 11px;font-size:12px;white-space:nowrap}
.theme-current-dot{width:10px;height:10px;border-radius:50%;background:var(--color-brand-primary);box-shadow:0 0 0 3px var(--color-brand-soft)}
.theme-popover{position:absolute;top:calc(100% + 9px);right:0;z-index:80;width:286px;padding:8px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface-raised);box-shadow:var(--shadow-popover)}
.theme-popover[hidden]{display:none}
.theme-popover-title{display:block;padding:6px 8px 8px;color:var(--color-text-muted);font-size:11px;font-weight:800;letter-spacing:.08em}
.theme-option{display:grid;width:100%;grid-template-columns:48px minmax(0,1fr) 18px;align-items:center;gap:10px;padding:9px 8px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--color-text-primary);text-align:left}
.theme-option:hover{background:var(--color-interactive-hover)}
.theme-option.active{border-color:var(--color-brand-secondary);background:var(--color-interactive-selected)}
.theme-option>span:nth-child(2){display:grid;gap:2px;min-width:0}
.theme-option b,.theme-option small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.theme-option b{font-size:12px}.theme-option small{color:var(--color-text-muted);font-size:10px}.theme-option strong{visibility:hidden;color:var(--color-brand-primary)}.theme-option.active strong{visibility:visible}
.theme-option-preview{display:flex;width:48px;height:28px;overflow:hidden;border:1px solid var(--color-border-soft);border-radius:7px;background:var(--color-surface)}
.theme-option-preview i{display:block;flex:1}.theme-option-preview i:first-child{flex:1.35}
[data-theme-option="klein-cobalt"] .theme-option-preview i:nth-child(1){background:#18243a}[data-theme-option="klein-cobalt"] .theme-option-preview i:nth-child(2){background:#1738d1}[data-theme-option="klein-cobalt"] .theme-option-preview i:nth-child(3){background:#f4f5f7}
[data-theme-option="jade-teal"] .theme-option-preview i:nth-child(1){background:#102c29}[data-theme-option="jade-teal"] .theme-option-preview i:nth-child(2){background:#0b655c}[data-theme-option="jade-teal"] .theme-option-preview i:nth-child(3){background:#f4f7f6}
[data-theme-option="ink-gold"] .theme-option-preview i:nth-child(1){background:#302419}[data-theme-option="ink-gold"] .theme-option-preview i:nth-child(2){background:#8a5a18}[data-theme-option="ink-gold"] .theme-option-preview i:nth-child(3){background:#f8f5ef}
[data-theme-option="mist-slate"] .theme-option-preview i:nth-child(1){background:#222a34}[data-theme-option="mist-slate"] .theme-option-preview i:nth-child(2){background:#46566a}[data-theme-option="mist-slate"] .theme-option-preview i:nth-child(3){background:#f5f6f7}

@media(max-width:760px){.theme-switcher-button [data-theme-current-label]{display:none}.theme-popover{position:fixed;top:70px;right:10px;width:min(286px,calc(100vw - 20px))}}
@media(prefers-reduced-motion:no-preference){html[data-theme-ready="true"] :where(.topbar,.sidebar,.panel,.metric,.primary,.secondary){transition:background-color .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease}}
@media(prefers-reduced-motion:reduce){html[data-theme-ready="true"] *{scroll-behavior:auto}}