/* Single color contract for the enhanced UI. /original/ does not load this file. */
:root {
  color-scheme: light;
  --paper: #f7f7f7;
  --surface: #ffffff;
  --surface-subtle: #fafafa;
  --surface-hover: #f6f6f6;
  --surface-selected: #f0f0f0;
  --ink: #1f2329;
  --text: #4e535c;
  --muted: #8f959e;
  --control-text: #646a73;
  --line: #ebebeb;
  --control-border: #dedede;
  --brand: #4e535c;
  --brand-dark: #1f2329;
  --brand-pale: #f4f4f4;
  --danger: #a43b37;
  --success: #3b6854;
  --radius: 12px;
  --card-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Workspace and consistent elevated white surfaces. */
body, .main-shell { background: var(--paper); color: var(--text); }
.sidebar, .topbar, .app-header, .mobile-nav { background: var(--surface); border-color: var(--line); }
.metrics, .panel, .workspace-label, .daily-list, .business-summary,
.business-stores, .assistant-compose, .assistant-output, .kanban-column,
.deal-card, .decision-hero, .client-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}
.detail-shop, .detail-consent, .invite-box, .assistant-choice, fieldset {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--radius);
}
.panel-foot, .brand-panel>.quiet-note, .dialog-head, .form-footer,
.upcoming>.simple-task, th { background: var(--surface); }
.panel-foot, .brand-panel>.quiet-note { border-radius: 0 0 var(--radius) var(--radius); }
.panel>.table-scroll:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.mode-banner, .demo-notice, .assistant-demo {
  background: var(--surface-subtle); border-color: var(--line); color: var(--control-text);
}
.workspace-avatar, .avatar, .avatar.dark {
  background: var(--brand-pale); border-color: var(--line); color: var(--control-text);
}
.sidebar .profile, .nav-count, .mode-tag, .search kbd { border-color: var(--line); }
.connection>span { background: #92979d; }

/* Neutral selection, hover and keyboard focus, without green or bright blue fills. */
.nav-item, .segmented button, .icon-button, .tabs button { color: var(--control-text); }
.nav-item:hover, .icon-button:hover, .brand-row:hover, tbody tr:hover,
.client-row:hover, .account-button:hover { background: var(--surface-hover); }
.nav-item.active { background: var(--surface-selected); color: var(--ink); }
.nav-item.active::before { background: #747a83; }
.segmented { background: var(--brand-pale); border-color: var(--line); }
.segmented button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.tabs button.active, .main-nav-item.active { color: var(--ink); border-color: #747a83; }
.mobile-nav .main-nav-item.active, .assistant-choice.selected, .selected-row {
  background: var(--brand-pale); color: var(--ink); border-color: #c7c7c7;
}
.button, .button.ghost, .account-button {
  background: var(--surface); border-color: var(--control-border); color: var(--text);
}
.button.primary { background: #f2f2f2; border-color: #dedede; color: var(--ink); }
.button:hover, .button.primary:hover, .button.ghost:hover {
  background: #eaeaea; border-color: #c7c7c7; color: var(--ink);
}
.button:active, .button.primary:active { background: #e3e3e3; }
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible { outline: 2px solid #747a83; outline-offset: 3px; }
input:focus, textarea:focus, select:focus { outline-color: #747a83; border-color: #92979d; }
input[type=checkbox], input[type=radio] { accent-color: #646a73; }
.search, input, select, textarea { background: var(--surface); border-color: var(--control-border); color: var(--ink); }
input::placeholder, textarea::placeholder, .search input::placeholder { color: #747a83; opacity: 1; }
.search input { background: transparent; border: 0; }

/* All page headings, numbers and body copy share the same hierarchy. */
h1, h2, h3, b, strong, .metric strong, .brand-word, .task-info .text-button,
.breadcrumbs b, legend, .person-name { color: var(--ink); }
.task-info p, label, .store-label, .service-state, .service-state.off,
.decision-seal, .decision-seal b { color: var(--text); }
.brand small, .nav-label, .connection, .version, .breadcrumbs, .breadcrumbs i,
.mode-tag, .nav-count, .eyebrow, .overview-note, .metric>span, .metric p,
.metric strong small, .task-info small, .task-info small>span, .panel-foot,
.brand-word small, .brand-row b small, .brand-row p, .brand-row>svg,
.quiet-note, th, td small, .customer-link small, .page-footer, .page-note,
.empty, .deal-store, .deal-card p, .deal-card>small, .deal-bottom,
.kanban-column h2>span:last-child, .kanban-empty, .decision-hero p,
.arena-grid p, .clean-list, .field-help, fieldset small, .detail-shop small,
.detail-task small, .timeline small, .detail-consent p, .service-state.off small {
  color: var(--muted);
}
.icon-button, .search, .search kbd, .person-name svg { color: var(--control-text); }
.text-button, .original-link, .clean-list li::before { color: var(--brand); }
.text-button:hover { color: var(--ink); }

/* Status is carried by labels and restrained text, never a yellow/green surface. */
.date-box, .date-box.late, .badge, .badge.success, .badge.muted,
.shop-chip, .shop-chip.available, .shop-chip.won {
  background: var(--surface-subtle); border-color: var(--line); color: var(--control-text);
}
.date-box.late { color: var(--danger); }
.badge.success, .shop-chip.won { color: var(--success); }
.stage-dot, .status-dot { background: #aeb2b8; }
.status-dot.green { background: var(--success); }
.stage-track>span { border-color: var(--line); color: var(--muted); }
.stage-track>span.reached { border-color: #aeb2b8; color: var(--control-text); }
.stage-track i { background: #e4e4e4; }
.stage-track .reached i { background: #92979d; }
.sync-warning, .inline-warning { background: var(--surface-subtle); border: 1px solid var(--line); color: var(--danger); }
label em { color: var(--danger); }

/* Remove hardcoded warm dividers, tinted overlays and shadows from the legacy layer. */
.task-row, .simple-task, .panel-foot, .brand-panel>.quiet-note,
.brand-row, th, td, .deal-bottom, .timeline article, .decision-seal {
  border-color: var(--line);
}
.deal-card:hover { border-color: #c7c7c7; }
dialog { border-color: var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 16px 64px rgba(0,0,0,0.12); }
dialog::backdrop, .drawer-backdrop { background: rgba(31,35,41,0.28); }
.toast { background: var(--ink); color: #fff; box-shadow: var(--card-shadow); }
@media(max-width:640px) { .sidebar { box-shadow: 8px 0 32px rgba(0,0,0,0.08); } }
