/* ═════════════════════════════════════════════════════════════════════
 * ChatDrivers — Design Tokens REFINADOS (v2)
 * ───────────────────────────────────────────────────────────────────
 * Base: public/design-tokens.css (Flavio, 23/mai)
 * Refinamentos (25/mai):
 *   - Mantém #2563eb azul + #f59e0b âmbar (sem rebrand)
 *   - 4 níveis de superfície (bg → surface → card → elevated) p/ hierarquia
 *   - JetBrains Mono pra telemetria/IDs (vibe mission control, sem virar terminal)
 *   - Status dots com glow tokenizado (mission control)
 *   - Tipografia: escala única + lh + tracking consistentes
 *   - Bordas mais sutis no dark (passa de #1a2744 pra #1f2b48)
 *   - Sombras com 2 layers (key + ambient) p/ depth real em dark
 *   - Tokens semânticos novos: data-pos / data-neg / scan-line / ring
 * ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── BRAND ──────────────────────────────────────────────────────── */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-active: #1e40af;
  --primary-soft: rgba(37, 99, 235, 0.14);
  --primary-soft-strong: rgba(37, 99, 235, 0.22);
  --primary-ring: rgba(37, 99, 235, 0.35);

  --accent: #f59e0b;          /* âmbar — CTAs específicos + alertas */
  --accent-hover: #d97706;
  --accent-soft: rgba(245, 158, 11, 0.16);
  --accent-ring: rgba(245, 158, 11, 0.30);

  /* ─── SEMÂNTICAS ──────────────────────────────────────────────────── */
  --success: #10b981;
  --success-soft: rgba(16, 185, 129, 0.14);
  --success-ring: rgba(16, 185, 129, 0.30);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.16);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.14);
  --danger-ring: rgba(239, 68, 68, 0.30);
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, 0.14);

  /* Dados (positivo/negativo neutros, não confundir com success/danger) */
  --data-pos: #34d399;
  --badge-blue: #7aa9ff; /* azul de badge/nota sobre fundo primary-soft (claro o suficiente p/ dark) */
  --badge-indigo: #818cf8; /* indigo de badge de papel (dark) */
  --badge-violet: #a78bfa; /* violeta de badge transportadora (dark) */
  --data-neg: #f87171;
  --data-neutral: #94a3b8;

  /* ─── SUPERFÍCIES — DARK DEFAULT ─────────────────────────────────── */
  --bg: #070b15;             /* canvas / fundo */
  --surface: #0b1224;        /* header, sidebar, áreas amplas */
  --card: #111a31;           /* cards padrão */
  --elevated: #182442;       /* hover, modais, KPIs em destaque */
  --border: #1f2b48;         /* borda padrão */
  --border-soft: #15203c;    /* borda muito sutil (separadores) */
  --border-strong: #2a3a60;  /* borda em foco / seleção */

  --text: #e6ecf5;
  --text-strong: #f8fafc;    /* títulos */
  --text-soft: #c2cde0;      /* corpo secundário */
  --muted: #8a98b3;
  --muted-strong: #b1bcd0;
  --disabled: #4a5572;

  /* ─── MISSION CONTROL (status dots + glows) ────────────────────── */
  --dot-live: #34d399;       /* ativo / pulsante */
  --dot-idle: #64748b;       /* ocioso */
  --dot-warn: #f59e0b;       /* atenção */
  --dot-error: #ef4444;      /* erro / escalada */
  --glow-live: 0 0 0 3px rgba(52, 211, 153, 0.18), 0 0 14px rgba(52, 211, 153, 0.45);
  --glow-warn: 0 0 0 3px rgba(245, 158, 11, 0.18), 0 0 14px rgba(245, 158, 11, 0.45);
  --glow-error: 0 0 0 3px rgba(239, 68, 68, 0.18), 0 0 14px rgba(239, 68, 68, 0.45);
  --glow-blue: 0 0 22px rgba(37, 99, 235, 0.18);
  --scan-line: rgba(37, 99, 235, 0.06);

  /* ─── SPACING (4px base) ─────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ─── RADIUS ─────────────────────────────────────────────────────── */
  --radius-xs: 4px;          /* badges densos */
  --radius-sm: 6px;          /* tags, chips */
  --radius-md: 10px;         /* botões, inputs, cards pequenos */
  --radius-lg: 14px;         /* cards principais */
  --radius-xl: 18px;         /* modais, painéis hero */
  --radius-2xl: 24px;        /* destaque máximo (FIN cards) */
  --radius-full: 9999px;     /* pills, avatares */

  /* ─── SHADOWS — 2 layers (dark precisa de mais densidade) ───────── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.30);
  --shadow-pop: 0 22px 60px rgba(0, 0, 0, 0.55), 0 6px 14px rgba(0, 0, 0, 0.35);

  /* ─── TIPOGRAFIA ─────────────────────────────────────────────────── */
  --font-base: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Menlo', 'Cascadia Code', monospace;

  --text-2xs: 10px;          /* eyebrow, kbd, contador denso */
  --text-xs: 11px;           /* labels uppercase, meta secundária */
  --text-sm: 13px;           /* botões, body denso */
  --text-base: 14px;         /* corpo padrão */
  --text-md: 15px;           /* corpo destaque */
  --text-lg: 17px;           /* card title */
  --text-xl: 20px;           /* H3 */
  --text-2xl: 24px;          /* H2 */
  --text-3xl: 30px;          /* KPI hero */
  --text-4xl: 38px;          /* hero pulse */
  --text-5xl: 48px;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.5;
  --lh-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.08em;   /* labels UPPERCASE */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ─── MOTION ─────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;

  /* ─── Z-INDEX ────────────────────────────────────────────────────── */
  --z-dropdown: 50;
  --z-sticky: 80;
  --z-modal: 100;
  --z-overlay: 200;
  --z-toast: 300;
  --z-monitor: 400;
}

/* ─── LIGHT THEME ──────────────────────────────────────────────────── */
.cd-light {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --card: #ffffff;
  --elevated: #ffffff;
  --border: #e3e8f1;
  --border-soft: #eef1f7;
  --border-strong: #c9d2e3;

  --text: #0f172a;
  --text-strong: #0a0f1f;
  --text-soft: #334155;
  --muted: #64748b;
  --muted-strong: #475569;
  --disabled: #cbd5e1;

  --primary-soft: rgba(37, 99, 235, 0.10);
  --primary-soft-strong: rgba(37, 99, 235, 0.16);
  --accent-soft: rgba(245, 158, 11, 0.12);
  --success-soft: rgba(16, 185, 129, 0.12);
  --danger-soft: rgba(239, 68, 68, 0.12);
  --warning-soft: rgba(245, 158, 11, 0.12);

  /* verde/vermelho de texto/dados escurecido p/ contraste AA sobre branco (auditoria UI 31/mai) */
  --success: #047857;
  --data-pos: #047857;
  --data-neg: #b91c1c;
  --badge-blue: #1d4ed8; /* azul de badge escurecido p/ AA sobre primary-soft claro */
  --badge-indigo: #4f46e5; /* indigo escurecido p/ AA no claro */
  --badge-violet: #6d28d9; /* violeta escurecido p/ AA no claro */

  --scan-line: rgba(37, 99, 235, 0.04);

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 14px 32px rgba(15, 23, 42, 0.14), 0 4px 8px rgba(15, 23, 42, 0.06);
  --shadow-pop: 0 22px 60px rgba(15, 23, 42, 0.18);

  --glow-live: 0 0 0 3px rgba(16, 185, 129, 0.20), 0 0 10px rgba(16, 185, 129, 0.45);
  --glow-warn: 0 0 0 3px rgba(245, 158, 11, 0.20), 0 0 10px rgba(245, 158, 11, 0.45);
  --glow-error: 0 0 0 3px rgba(239, 68, 68, 0.20), 0 0 10px rgba(239, 68, 68, 0.45);
  --glow-blue: 0 0 18px rgba(37, 99, 235, 0.14);
}

/* ════════ Scrollbar slim — SISTEMA TODO ════════════════════════════
 * Vive aqui (design-tokens.css é carregado por quase toda página: admin, portal
 * do motorista, parceira, cadastro, landings). 6px discreta no lugar da barra
 * nativa "grossa com setas" do Windows. O scroll segue estrutural (some quando cabe). */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted, var(--border-strong)); }
*::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }