/* RESULT-CHAT — tokens do tema (SÓ custom properties; nenhuma classe aqui).
   Origem: identidade v3 do CRM UNINTER (azul #3A5A93 / #6E8FE0 no escuro, escala neutra "Direção A", raios 6/10/14/18)
   + manual de marca Result+ 2026 (amarelo/navy/creme, só para marca e login).
   Regra da casa: HEX/RGB SÓ AQUI. Templates, JS e `static/src/rp/*.css` usam `var(--token)` (tests/test_tema.py vigia).
   Os componentes `rp-*` vivem em `static/src/rp/*.css` e são compilados em `static/css/app.css` (scripts/css.py build).
   Tema escuro = classe `.dark` no <html>; só redefine o que muda. Chrome do header (`--sb-*`) é igual nos dois temas. */
:root {
  /* Métricas */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-brand: "Poppins", "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Escala de z-index: header/drawer/dropdown abaixo de modal e toast */
  --z-header: 30;
  --z-drawer: 35;
  --z-dropdown: 40;
  --z-modal: 50;
  --z-toast: 60;

  /* Chrome do header e do drawer (navy Result+, igual nos dois temas) */
  --sb-bg: #1B2438;
  --sb-surface: #232E47;
  --sb-surface-2: #2B3752;
  --sb-border: #34405C;
  --sb-text: #AEB8D1;
  --sb-text-strong: #F4F6FB;
  --sb-text-muted: #7C87A3;
  --header: var(--sb-bg);
  --header-2: var(--sb-surface);
  --subrow-bg: #E8EEF8;
  --subrow-text: #1F3A66;

  /* Marca Result+ (manual 2026) — só marca/login, nunca estado de UI */
  --brand-yellow: #f3b808;
  --brand-yellow-light: #ffe27a;
  --brand-yellow-dark: #d99a00;
  /* Bloco da marca no header (molde CRM UNINTER): medidas e sombras do selo */
  --navrow-h: 56px;
  --subheader-h: 46px;
  --brand-col-w: 232px;
  --brand-pill-shadow: 6px 0 14px rgba(0, 0, 0, .35), inset -2px 0 0 rgba(255, 255, 255, .05);
  --brand-seal-shadow: 0 6px 14px rgba(0, 0, 0, .28), 0 0 0 3px var(--sb-bg), 0 0 0 4px rgba(255, 255, 255, .1);
  --brand-navy: #20234B;
  --brand-navy-dark: #13132A;
  --brand-cream: #FFFCF1;

  /* Neutros — claro */
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-2: #F0F1F4;
  --surface-3: #E4E6EC;
  --border: #DDE1E8;
  --border-2: #C7CCD6;
  --text: #161A22;
  --text-sub: #3A4150;
  --text-muted: #5B6472;   /* ≥4,5:1 sobre surface, surface-2 e surface-3 */
  --white: #FFFFFF;

  /* Primária e links */
  --primary: #3A5A93;
  --primary-dark: #2E4A7A;
  --primary-soft: rgba(58, 90, 147, .12);
  --primary-ring: rgba(58, 90, 147, .28);
  --primary-foreground: #FFFFFF;
  --link: #2C5AA0;
  --link-hover: #1F4275;
  /* Aliases (templates/JS/CSS do produto ainda usam o prefixo accent) */
  --accent: var(--primary);
  --accent-soft: var(--primary-soft);
  --accent-ring: var(--primary-ring);
  --accent-grad-a: var(--primary);
  --accent-grad-b: var(--primary-dark);

  /* Estados */
  --success: #15803D;
  --success-soft: rgba(21, 128, 61, .12);
  --warning: #B45309;
  --warning-soft: rgba(180, 83, 9, .12);
  --error: #B91C1C;
  --error-soft: rgba(185, 28, 28, .10);
  --info: #1D4ED8;
  --info-soft: rgba(29, 78, 216, .12);
  /* Texto sobre o fundo -soft (≥4,5:1 sobre surface, surface-2 e surface-3 com o -soft por cima) */
  --primary-text: var(--primary);
  --success-text: #116631;
  --warning-text: #904207;
  --error-text: #B01B1B;
  --info-text: #1C4ACD;

  /* Sombras e cortinas */
  --shadow-sm: 0 1px 3px rgba(15, 23, 32, .06), 0 1px 2px rgba(15, 23, 32, .04);
  --shadow-md: 0 4px 14px rgba(15, 23, 32, .08), 0 2px 6px rgba(15, 23, 32, .05);
  --shadow-lg: 0 10px 32px rgba(15, 23, 32, .10), 0 4px 12px rgba(15, 23, 32, .06);
  --shadow-xl: 0 20px 52px rgba(15, 23, 32, .13), 0 8px 20px rgba(15, 23, 32, .07);
  --overlay: rgba(15, 23, 32, .50);
  --scrim: rgba(0, 0, 0, .72);
  --scrim-btn: rgba(0, 0, 0, .55);

  /* WhatsApp (cores fixas) */
  --wa: #25D366;
  --wa-tick-read: #53BDEB;

  /* Gráficos (paleta categórica) */
  --chart-1: #3B6FB0;
  --chart-2: #0F9D8A;
  --chart-3: #2F9E6E;
  --chart-4: #7A5FC9;
  --chart-5: #3B8FA6;
  /* Nomes de cor usados nos ícones de KPI */
  --blue: var(--chart-1);
  --blue-soft: color-mix(in oklch, var(--chart-1) 14%, transparent);
  --indigo: var(--chart-4);
  --indigo-soft: color-mix(in oklch, var(--chart-4) 14%, transparent);
  --amber: var(--warning);
  --amber-soft: var(--warning-soft);
  color-scheme: light;
}
.dark {
  color-scheme: dark;
  --bg: #0F1115;
  --surface: #181B21;
  --surface-2: #20242C;
  --surface-3: #272C36;
  --border: #333A47;
  --border-2: #454E5F;
  --text: #ECEEF2;
  --text-sub: #C3C9D4;
  --text-muted: #9AA2B1;

  --primary: #6E8FE0;
  --primary-dark: #5A7BD0;
  --primary-soft: rgba(110, 143, 224, .18);
  --primary-ring: rgba(110, 143, 224, .32);
  --primary-foreground: #0B1220;
  --link: #7FADE0;
  --link-hover: #A6C6EC;

  --success: #4ADE80;
  --success-soft: rgba(74, 222, 128, .14);
  --warning: #FCD34D;
  --warning-soft: rgba(252, 211, 77, .14);
  --error: #F87171;
  --error-soft: rgba(248, 113, 113, .12);
  --info: #60A5FA;
  --info-soft: rgba(96, 165, 250, .14);
  --primary-text: #B4C6F2;
  --success-text: #6EE79A;
  --warning-text: #FCD34D;
  --error-text: #FCA5A5;
  --info-text: #93C5FD;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .40);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .48);
  --shadow-lg: 0 10px 34px rgba(0, 0, 0, .56);
  --shadow-xl: 0 20px 56px rgba(0, 0, 0, .64);
  --overlay: rgba(0, 0, 0, .62);

  --subrow-bg: var(--sb-surface);
  --subrow-text: var(--sb-text-strong);

  --chart-1: #6FA0DE;
  --chart-2: #2FC4B0;
  --chart-3: #52C08A;
  --chart-4: #A290E8;
  --chart-5: #5FB8CF;
}