:root {
  color-scheme: dark;
  --text-light: #f8fafc;
  --paper: #11100f;
  --panel: rgba(255, 255, 255, 0.08);
  --ink: #f8fafc;
  --muted: #aab2c0;
  --line: rgba(248, 250, 252, 0.16);
  --light-line: rgba(248, 250, 252, 0.16);
}

body {
  color: var(--ink) !important;
  background:
    linear-gradient(115deg, rgba(216, 93, 54, 0.28), transparent 34%),
    linear-gradient(245deg, rgba(101, 123, 78, 0.22), transparent 36%),
    linear-gradient(180deg, #17110f 0%, #0f0c0b 100%) !important;
}

.login-card,
.topbar,
.panel,
.list-panel,
.detail-panel,
.warehouse-list-panel,
.work-surface,
.step-view,
.incoming-board,
.dock-panel,
.action-panel,
.action-panel.secondary,
.item-row,
.shelf-row,
.empty-card,
.metric-card,
.list-card,
.detail-form,
.config-form,
.warehouse-card,
.line-card,
.truck-card,
.label-item,
.placement-card,
.suggestion-card,
.scan-station,
.lookup-stage,
.selected-order,
.receipt-card,
.employee-row,
.schedule-grid div,
.compact-row,
.card-preview,
.ekaer-card {
  color: var(--ink) !important;
  border-color: var(--line) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28) !important;
}

.login-card,
.topbar {
  background: rgba(23, 17, 15, 0.88) !important;
}

input,
select,
textarea {
  color: var(--ink) !important;
  border-color: var(--line) !important;
  background: rgba(5, 5, 5, 0.42) !important;
}

option {
  color: #f8fafc;
  background: #17110f;
}

.secondary-button,
.ghost-button.dark,
.back-button,
.icon-button {
  color: var(--ink) !important;
  border-color: var(--line) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.ghost-button {
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.muted,
.muted-block,
.shelf-meta,
.compact-line,
.detail-header p:last-child,
.empty-state p:last-child,
.login-copy p:last-child,
.auth-message,
.brand-context,
.brand-lockup span:last-child,
.hero p:last-child,
.hero-card span,
.hero-card small,
.step-button small,
.metric-card span,
.ekaer-card p,
.employee-row small,
.schedule-grid span {
  color: var(--muted) !important;
}

.photo-thumb,
.badge,
.step-pill {
  color: var(--ink) !important;
  border-color: var(--line) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.card-preview.empty {
  color: var(--muted) !important;
}