/* Modo escuro: redefine os tokens de cor e ajusta as superfícies que usam cor fixa em vez de var(). */
html[data-theme="dark"] {
  color-scheme: dark;
  --background: #10151b;
  --surface: #1a2129;
  --surface-alt: #212933;
  --ink: #e6ebf0;
  --muted: #97a3ad;
  --faint: #6d7982;
  --primary: #5b9bdb;
  --primary-hover: #79ade2;
  --primary-soft: rgba(91, 155, 219, .16);
  --success: #3fb872;
  --success-soft: rgba(63, 184, 114, .14);
  --warning: #e0a83f;
  --warning-soft: rgba(224, 168, 63, .14);
  --orange: #e0854a;
  --danger: #e2665f;
  --danger-soft: rgba(226, 102, 95, .14);
  --border: #2b333c;
  --border-strong: #3c454f;
  --shadow: 0 20px 60px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] body { background: var(--background); }

html[data-theme="dark"] .avatar,
html[data-theme="dark"] .avatar.tone-1,
html[data-theme="dark"] .avatar.tone-2,
html[data-theme="dark"] .avatar.tone-3,
html[data-theme="dark"] .avatar.tone-4 { background: #29333d; color: #a9c3da; }

html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea { background: var(--surface); border-color: var(--border); color: var(--ink); }
html[data-theme="dark"] .input::placeholder,
html[data-theme="dark"] .textarea::placeholder { color: var(--faint); }
html[data-theme="dark"] .input:focus,
html[data-theme="dark"] .select:focus,
html[data-theme="dark"] .textarea:focus { box-shadow: 0 0 0 3px rgba(91, 155, 219, .22); }

html[data-theme="dark"] .metrics,
html[data-theme="dark"] .advanced-filters,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .attach-menu,
html[data-theme="dark"] .drawer,
html[data-theme="dark"] .chat-layout,
html[data-theme="dark"] .chat-header,
html[data-theme="dark"] .composer,
html[data-theme="dark"] .conversation-item,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .settings-nav,
html[data-theme="dark"] .team-card,
html[data-theme="dark"] .integration-card,
html[data-theme="dark"] .roles-list button,
html[data-theme="dark"] .bubble,
html[data-theme="dark"] .login-form-wrap { background: var(--surface); }

html[data-theme="dark"] .modal { border: 1px solid var(--border); }
html[data-theme="dark"] .empty { border-color: var(--border-strong); }

html[data-theme="dark"] .conversation-item:hover,
html[data-theme="dark"] .settings-nav button:hover,
html[data-theme="dark"] .table tbody tr:hover,
html[data-theme="dark"] .button:hover,
html[data-theme="dark"] .icon-button:hover { background: var(--surface-alt); }
html[data-theme="dark"] .conversation-item.active { background: rgba(91, 155, 219, .12); }
html[data-theme="dark"] .settings-nav button.active { background: var(--primary-soft); color: var(--primary); }

html[data-theme="dark"] .chat-main { background: var(--background); }
html[data-theme="dark"] .day-separator { background: var(--surface-alt); color: var(--muted); }
html[data-theme="dark"] .message.outgoing .bubble { background: rgba(91, 155, 219, .18); border-color: rgba(91, 155, 219, .32); }

html[data-theme="dark"] .table th { background: var(--surface-alt); }

html[data-theme="dark"] .skeleton { background: linear-gradient(90deg, #232c35 20%, #2d3742 50%, #232c35 80%); background-size: 200% 100%; }

html[data-theme="dark"] .badge.blue { color: #7db1e6; }
html[data-theme="dark"] .badge.green { color: #5cc98d; }
html[data-theme="dark"] .badge.amber { color: #e0b563; }
html[data-theme="dark"] .badge.orange { color: #e69b6c; }
html[data-theme="dark"] .badge.red { color: #ea8b85; }
html[data-theme="dark"] .badge.gray { color: #97a3ad; }

html[data-theme="dark"] .login-alert { border-color: rgba(226, 102, 95, .35); }
html[data-theme="dark"] .login-alert.success { border-color: rgba(63, 184, 114, .35); }

html[data-theme="dark"] .field label { color: var(--ink); }
html[data-theme="dark"] .lead-service { color: var(--ink); }
html[data-theme="dark"] .lead-meta .meta-value { color: #c3ccd4; }
html[data-theme="dark"] .table-person strong,
html[data-theme="dark"] .detail-value,
html[data-theme="dark"] .note p { color: var(--ink); }
html[data-theme="dark"] .team-card .team-icon,
html[data-theme="dark"] .integration-card .team-icon,
html[data-theme="dark"] .security-row .team-icon,
html[data-theme="dark"] .document-row .file-icon { background: var(--surface-alt); color: var(--primary); }

html[data-theme="dark"] ::selection { background: rgba(91, 155, 219, .35); }