/* Box Deal theme tokens. Unmigrated screens keep their own colors. */

html[data-theme="dark"],
html[data-theme="system"] {
  color-scheme: dark;
  --bd-bg: #12151c;
  --bd-nav: #171b24;
  --bd-surface: #1c212c;
  --bd-surface-2: #232836;
  --bd-border: #313746;
  --bd-text: #f4f6fb;
  --bd-text-secondary: #a7b0c0;
  --bd-text-muted: #7f8898;
  --bd-input-bg: #1a1f2a;
  --bd-input-border: #3a4150;
  --bd-hover: rgba(255, 255, 255, 0.05);
  --bd-selected: var(--bd-palette-soft);
  --bd-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  --bd-palette: #ff2f86;
  --bd-palette-strong: #e21872;
  --bd-palette-soft: rgba(255, 47, 134, 0.16);
  --bd-palette-border: rgba(255, 47, 134, 0.45);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(255, 47, 134, 0.22);
  --bd-accent: var(--bd-palette);
  --bd-accent-strong: var(--bd-palette-strong);
  --bd-on-accent: var(--bd-palette-ink);
  --bd-success: #2faf62;
  --bd-warning: #e0942a;
  --bd-warning-strong: #d36a1e;
  --bd-error: #e15b64;
  --bd-product-surface: #e6e8ee;
  --bd-product-ink: #2a3140;
  --bd-focus: var(--bd-palette-focus);
}

html[data-theme="light"] {
  color-scheme: light;
  --bd-bg: #f3f4f7;
  --bd-nav: #ffffff;
  --bd-surface: #ffffff;
  --bd-surface-2: #f7f8fa;
  --bd-border: #e4e7ee;
  --bd-text: #1c2030;
  --bd-text-secondary: #5d6472;
  --bd-text-muted: #8b93a1;
  --bd-input-bg: #ffffff;
  --bd-input-border: #d5dae3;
  --bd-hover: rgba(20, 24, 40, 0.04);
  --bd-selected: var(--bd-palette-soft);
  --bd-shadow: 0 8px 24px rgba(20, 24, 40, 0.06);
  --bd-palette: #e21872;
  --bd-palette-strong: #c41264;
  --bd-palette-soft: rgba(226, 24, 114, 0.12);
  --bd-palette-border: rgba(226, 24, 114, 0.35);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(226, 24, 114, 0.18);
  --bd-accent: var(--bd-palette);
  --bd-accent-strong: var(--bd-palette-strong);
  --bd-on-accent: var(--bd-palette-ink);
  --bd-success: #1f9d55;
  --bd-warning: #d98416;
  --bd-warning-strong: #c2610c;
  --bd-error: #d64545;
  --bd-product-surface: #f3f4f7;
  --bd-product-ink: #5c6573;
  --bd-focus: var(--bd-palette-focus);
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    color-scheme: light;
    --bd-bg: #f3f4f7;
    --bd-nav: #ffffff;
    --bd-surface: #ffffff;
    --bd-surface-2: #f7f8fa;
    --bd-border: #e4e7ee;
    --bd-text: #1c2030;
    --bd-text-secondary: #5d6472;
    --bd-text-muted: #8b93a1;
    --bd-input-bg: #ffffff;
    --bd-input-border: #d5dae3;
    --bd-hover: rgba(20, 24, 40, 0.04);
    --bd-selected: var(--bd-palette-soft);
    --bd-shadow: 0 8px 24px rgba(20, 24, 40, 0.06);
    --bd-palette: #e21872;
    --bd-palette-strong: #c41264;
    --bd-palette-soft: rgba(226, 24, 114, 0.12);
    --bd-palette-border: rgba(226, 24, 114, 0.35);
    --bd-palette-ink: #ffffff;
    --bd-palette-focus: 0 0 0 3px rgba(226, 24, 114, 0.18);
    --bd-accent: var(--bd-palette);
    --bd-accent-strong: var(--bd-palette-strong);
    --bd-on-accent: var(--bd-palette-ink);
    --bd-success: #1f9d55;
    --bd-warning: #d98416;
    --bd-warning-strong: #c2610c;
    --bd-error: #d64545;
    --bd-product-surface: #f3f4f7;
    --bd-product-ink: #5c6573;
    --bd-focus: var(--bd-palette-focus);
  }
}

.topbar.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 7px 14px;
  background: var(--bd-nav);
  border-bottom: 1px solid var(--bd-border);
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar.app-header .brand-block { min-width: 0; flex: none; }
.topbar.app-header .brand-title {
  font-size: 17px;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--bd-text);
}
.topbar.app-header .brand-subtitle {
  font-size: 11px;
  margin-top: 3px;
  color: var(--bd-text-muted);
}
.topbar.app-header .header-logo { height: 28px; width: auto; }
.topbar.app-header .app-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.topbar.app-header .app-nav::-webkit-scrollbar { display: none; }
.topbar.app-header .app-nav-link {
  flex: none;
  padding: 6px 8px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--bd-text-secondary);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
}
.topbar.app-header .app-nav-link:hover {
  color: var(--bd-text);
  background: var(--bd-hover);
  border-color: transparent;
}
.topbar.app-header .app-nav-link.active {
  color: var(--bd-on-accent);
  background: var(--bd-accent);
  box-shadow: none;
}
.topbar.app-header .nav-badge {
  margin-left: 4px;
  background: var(--bd-on-accent);
  color: var(--bd-accent);
}
.topbar.app-header .header-tools { flex: none; display: flex; gap: 6px; }
.topbar.app-header .icon-action {
  border: 1px solid var(--bd-border);
  background: var(--bd-surface-2);
  color: var(--bd-text);
  border-radius: 8px;
  padding: 6px 9px;
}

.nav-meta {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 8px;
  color: var(--bd-text-secondary);
}
.nav-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 750;
  color: var(--bd-text-secondary);
}
.nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bd-success);
}
.nav-when { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.nav-when b { color: var(--bd-text); font-size: 14px; font-weight: 800; }
.nav-when span { color: var(--bd-text-muted); font-size: 11px; font-weight: 650; }
.nav-theme {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bd-border);
  border-radius: 8px;
  background: var(--bd-surface-2);
  color: var(--bd-text);
}
.nav-theme svg { width: 16px; height: 16px; display: none; }
html[data-theme="light"] .nav-theme .icon-sun,
html[data-theme="dark"] .nav-theme .icon-moon,
html[data-theme="system"] .nav-theme .icon-system { display: block; }

@media (prefers-color-scheme: light) {
  html[data-theme="system"] .nav-theme .icon-system { display: block; }
  html[data-theme="system"] .nav-theme .icon-sun,
  html[data-theme="system"] .nav-theme .icon-moon { display: none; }
}


html[data-theme="dark"][data-accent="orange"],
html[data-theme="system"][data-accent="orange"] {
  --bd-palette: #ff8a1f;
  --bd-palette-strong: #e06d00;
  --bd-palette-soft: rgba(255,138,31,.18);
  --bd-palette-border: rgba(255,138,31,.5);
  --bd-palette-ink: #1c1408;
  --bd-palette-focus: 0 0 0 3px rgba(255,138,31,.18);
}
html[data-theme="dark"][data-accent="blue"],
html[data-theme="system"][data-accent="blue"] {
  --bd-palette: #3b82f6;
  --bd-palette-strong: #2563eb;
  --bd-palette-soft: rgba(59,130,246,.18);
  --bd-palette-border: rgba(59,130,246,.5);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(59,130,246,.18);
}
html[data-theme="dark"][data-accent="emerald"],
html[data-theme="system"][data-accent="emerald"] {
  --bd-palette: #10b981;
  --bd-palette-strong: #059669;
  --bd-palette-soft: rgba(16,185,129,.18);
  --bd-palette-border: rgba(16,185,129,.5);
  --bd-palette-ink: #06281c;
  --bd-palette-focus: 0 0 0 3px rgba(16,185,129,.18);
}
html[data-theme="dark"][data-accent="purple"],
html[data-theme="system"][data-accent="purple"] {
  --bd-palette: #8b5cf6;
  --bd-palette-strong: #7c3aed;
  --bd-palette-soft: rgba(139,92,246,.18);
  --bd-palette-border: rgba(139,92,246,.5);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(139,92,246,.18);
}
html[data-theme="dark"][data-accent="cyan"],
html[data-theme="system"][data-accent="cyan"] {
  --bd-palette: #0891b2;
  --bd-palette-strong: #0e7490;
  --bd-palette-soft: rgba(8,145,178,.18);
  --bd-palette-border: rgba(8,145,178,.5);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(8,145,178,.18);
}
html[data-theme="dark"][data-accent="crimson"],
html[data-theme="system"][data-accent="crimson"] {
  --bd-palette: #e11d48;
  --bd-palette-strong: #be123c;
  --bd-palette-soft: rgba(225,29,72,.18);
  --bd-palette-border: rgba(225,29,72,.5);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(225,29,72,.18);
}
html[data-theme="dark"][data-accent="amber"],
html[data-theme="system"][data-accent="amber"] {
  --bd-palette: #f59e0b;
  --bd-palette-strong: #d97706;
  --bd-palette-soft: rgba(245,158,11,.2);
  --bd-palette-border: rgba(245,158,11,.55);
  --bd-palette-ink: #1c1408;
  --bd-palette-focus: 0 0 0 3px rgba(245,158,11,.2);
}
html[data-theme="dark"][data-accent="rose"],
html[data-theme="system"][data-accent="rose"] {
  --bd-palette: #fb7185;
  --bd-palette-strong: #e11d48;
  --bd-palette-soft: rgba(251,113,133,.18);
  --bd-palette-border: rgba(251,113,133,.5);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(251,113,133,.18);
}
html[data-theme="dark"][data-accent="indigo"],
html[data-theme="system"][data-accent="indigo"] {
  --bd-palette: #6366f1;
  --bd-palette-strong: #4f46e5;
  --bd-palette-soft: rgba(99,102,241,.18);
  --bd-palette-border: rgba(99,102,241,.5);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(99,102,241,.18);
}
html[data-theme="light"][data-accent="orange"] {
  --bd-palette: #e06d00;
  --bd-palette-strong: #c45c00;
  --bd-palette-soft: rgba(224,109,0,.12);
  --bd-palette-border: rgba(224,109,0,.4);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(224,109,0,.12);
}
html[data-theme="light"][data-accent="blue"] {
  --bd-palette: #1d4ed8;
  --bd-palette-strong: #1e40af;
  --bd-palette-soft: rgba(29,78,216,.12);
  --bd-palette-border: rgba(29,78,216,.35);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(29,78,216,.12);
}
html[data-theme="light"][data-accent="emerald"] {
  --bd-palette: #047857;
  --bd-palette-strong: #065f46;
  --bd-palette-soft: rgba(4,120,87,.12);
  --bd-palette-border: rgba(4,120,87,.35);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(4,120,87,.12);
}
html[data-theme="light"][data-accent="purple"] {
  --bd-palette: #6d28d9;
  --bd-palette-strong: #5b21b6;
  --bd-palette-soft: rgba(109,40,217,.12);
  --bd-palette-border: rgba(109,40,217,.35);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(109,40,217,.12);
}
html[data-theme="light"][data-accent="cyan"] {
  --bd-palette: #0e7490;
  --bd-palette-strong: #155e75;
  --bd-palette-soft: rgba(14,116,144,.12);
  --bd-palette-border: rgba(14,116,144,.35);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(14,116,144,.12);
}
html[data-theme="light"][data-accent="crimson"] {
  --bd-palette: #be123c;
  --bd-palette-strong: #9f1239;
  --bd-palette-soft: rgba(190,18,60,.12);
  --bd-palette-border: rgba(190,18,60,.35);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(190,18,60,.12);
}
html[data-theme="light"][data-accent="amber"] {
  --bd-palette: #d97706;
  --bd-palette-strong: #b45309;
  --bd-palette-soft: rgba(217,119,6,.14);
  --bd-palette-border: rgba(217,119,6,.4);
  --bd-palette-ink: #1c1408;
  --bd-palette-focus: 0 0 0 3px rgba(217,119,6,.14);
}
html[data-theme="light"][data-accent="rose"] {
  --bd-palette: #e11d48;
  --bd-palette-strong: #be123c;
  --bd-palette-soft: rgba(225,29,72,.12);
  --bd-palette-border: rgba(225,29,72,.35);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(225,29,72,.12);
}
html[data-theme="light"][data-accent="indigo"] {
  --bd-palette: #4338ca;
  --bd-palette-strong: #3730a3;
  --bd-palette-soft: rgba(67,56,202,.12);
  --bd-palette-border: rgba(67,56,202,.35);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(67,56,202,.12);
}
@media (prefers-color-scheme: light) {
  html[data-theme="system"][data-accent="orange"] {
  --bd-palette: #e06d00;
  --bd-palette-strong: #c45c00;
  --bd-palette-soft: rgba(224,109,0,.12);
  --bd-palette-border: rgba(224,109,0,.4);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(224,109,0,.12);
}
  html[data-theme="system"][data-accent="blue"] {
  --bd-palette: #1d4ed8;
  --bd-palette-strong: #1e40af;
  --bd-palette-soft: rgba(29,78,216,.12);
  --bd-palette-border: rgba(29,78,216,.35);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(29,78,216,.12);
}
  html[data-theme="system"][data-accent="emerald"] {
  --bd-palette: #047857;
  --bd-palette-strong: #065f46;
  --bd-palette-soft: rgba(4,120,87,.12);
  --bd-palette-border: rgba(4,120,87,.35);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(4,120,87,.12);
}
  html[data-theme="system"][data-accent="purple"] {
  --bd-palette: #6d28d9;
  --bd-palette-strong: #5b21b6;
  --bd-palette-soft: rgba(109,40,217,.12);
  --bd-palette-border: rgba(109,40,217,.35);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(109,40,217,.12);
}
  html[data-theme="system"][data-accent="cyan"] {
  --bd-palette: #0e7490;
  --bd-palette-strong: #155e75;
  --bd-palette-soft: rgba(14,116,144,.12);
  --bd-palette-border: rgba(14,116,144,.35);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(14,116,144,.12);
}
  html[data-theme="system"][data-accent="crimson"] {
  --bd-palette: #be123c;
  --bd-palette-strong: #9f1239;
  --bd-palette-soft: rgba(190,18,60,.12);
  --bd-palette-border: rgba(190,18,60,.35);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(190,18,60,.12);
}
  html[data-theme="system"][data-accent="amber"] {
  --bd-palette: #d97706;
  --bd-palette-strong: #b45309;
  --bd-palette-soft: rgba(217,119,6,.14);
  --bd-palette-border: rgba(217,119,6,.4);
  --bd-palette-ink: #1c1408;
  --bd-palette-focus: 0 0 0 3px rgba(217,119,6,.14);
}
  html[data-theme="system"][data-accent="rose"] {
  --bd-palette: #e11d48;
  --bd-palette-strong: #be123c;
  --bd-palette-soft: rgba(225,29,72,.12);
  --bd-palette-border: rgba(225,29,72,.35);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(225,29,72,.12);
}
  html[data-theme="system"][data-accent="indigo"] {
  --bd-palette: #4338ca;
  --bd-palette-strong: #3730a3;
  --bd-palette-soft: rgba(67,56,202,.12);
  --bd-palette-border: rgba(67,56,202,.35);
  --bd-palette-ink: #ffffff;
  --bd-palette-focus: 0 0 0 3px rgba(67,56,202,.12);
}
}
