/* =====================================================================
   GR Water Solutions — CRM Design Tokens (redesign 2026)
   Fonte da verdade dos tokens visuais. Combina os primitivos da marca
   (tokens.css) + a camada semântica do dashboard (crm.css), com o tema
   escuro sob `html.dark` (mesmo seletor do PrimeVue Aura) e um mapa de
   compatibilidade dos antigos `--crm-*` para as páginas ainda não migradas.
   Carregar PRIMEIRO (importado no topo de main.css).
   ===================================================================== */

/* ---------------------------------------------------------------------
   FONTES OFICIAIS DA MARCA — arquivos em /public/fonts
   --------------------------------------------------------------------- */
/* Futura — display / títulos */
@font-face {
  font-family: 'Futura';
  src: url('/fonts/futura-bt.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Futura';
  src: url('/fonts/futura-extrabold.woff2') format('woff2');
  font-weight:600 900; font-style: normal; font-display: swap;
}
/* Gotham — corpo */
@font-face { font-family: 'Gotham'; src: url('/fonts/Gotham-Thin.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/fonts/Gotham-ThinItalic.woff2') format('woff2'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/fonts/Gotham-XLight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/fonts/Gotham-XLightItalic.woff2') format('woff2'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/fonts/Gotham-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/fonts/Gotham-LightItalic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/fonts/Gotham-Book.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/fonts/Gotham-BookItalic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
/* ⚠ Mapeamento de pesos: Medium cobre 500–600 (o "semibold" do app), Bold é o
   700 e Black o 800. Antes, Bold e Black disputavam o MESMO peso 600 (a Black
   vencia) e não havia face 700 (caía na Ultra 900) — todo semibold/bold do app
   renderizava Black/Ultra, o texto ficava pesadíssimo. */
@font-face { font-family: 'Gotham'; src: url('/fonts/Gotham-Medium.woff2') format('woff2'); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/fonts/Gotham-MediumItalic.woff2') format('woff2'); font-weight: 500 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/fonts/Gotham-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/fonts/Gotham-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/fonts/Gotham-Black.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/fonts/Gotham-BlackItalic.woff2') format('woff2'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/fonts/Gotham-Ultra.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/fonts/Gotham-UltraItalic.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* ------------------ PRIMITIVOS DA MARCA ------------------ */
  --grws-laranja:       #FA981A;
  --grws-verde:         #51CF4A;
  --grws-azul:          #116CD3;
  --grws-grad-laranja:  linear-gradient(135deg, #FAA823 0%, #FA6800 100%);
  --grws-grad-verde:    linear-gradient(135deg, #68E04B 0%, #009245 100%);
  --grws-grad-azul:     linear-gradient(135deg, #11A0D3 0%, #1124D3 100%);
  --grws-navy:          #06267C;
  --grws-navy-deep:     #031D61;
  --grws-navy-mid:      #082F97;
  --grws-grad-navy:     linear-gradient(135deg, #082F97 0%, #031D61 100%);
  --grws-branco:        #FFFFFF;
  --grws-preto:         #1F222B;
  --grws-cinza-900:     #161A24;
  --grws-cinza-700:     #434C5E;
  --grws-cinza-500:     #818999;
  --grws-cinza-300:     #CFD4DE;
  --grws-cinza-200:     #E3E7EE;
  --grws-cinza-100:     #EEF1F7;
  --grws-cinza-50:      #F6F8FB;
  --grws-tint-laranja:  #FFF4E6;
  --grws-tint-verde:    #EAFBE9;
  --grws-tint-azul:     #EBF3FF;
  --grws-tint-navy:     #E6EBF5;

  /* ------------------ TIPOGRAFIA ------------------ */
  --grws-font-display:  'Futura', 'Futura BT', 'Century Gothic', system-ui, sans-serif;
  --grws-font-body:     'Gotham', 'Helvetica Neue', 'Inter', Arial, sans-serif;
  --grws-ls-eyebrow:    0.12em;
  --grws-ease:          cubic-bezier(0.2, 0.8, 0.2, 1);
  --grws-duration-1:    120ms;
  --grws-duration-2:    200ms;
  --grws-duration-3:    320ms;

  /* ------------------ SUPERFÍCIES SEMÂNTICAS (LIGHT) ------------------ */
  --app-bg:        #EEF2F8;
  --panel:         #FFFFFF;
  --panel-2:       var(--grws-cinza-50);
  --panel-inset:   #F4F7FC;
  --ink:           var(--grws-preto);
  --ink-muted:     var(--grws-cinza-700);
  --ink-subtle:    var(--grws-cinza-500);
  --line:          var(--grws-cinza-200);
  --line-soft:     #EDF1F8;
  --line-strong:   var(--grws-cinza-300);

  --sidebar-bg:    linear-gradient(185deg, #082F97 0%, #041E63 100%);
  --topbar-bg:     rgba(255,255,255,0.82);

  /* ---- ESCALA PADRONIZADA DE GRÁFICOS — azul único (navy → claro) ---- */
  --c1: #0A327E;
  --c2: #0E4FB0;
  --c3: #116CD3;   /* azul da marca — cor de dado primária */
  --c4: #3F8AE0;
  --c5: #79AFEC;
  --c6: #B7D4F7;
  --c-grad: linear-gradient(180deg, #3F8AE0 0%, #116CD3 60%, #0A327E 100%);

  /* ---- cores semânticas de dado (uso parcimonioso, por significado) ---- */
  --pos:     #15994B;   /* crescimento / ganho / delta positivo */
  --pos-bg:  var(--grws-tint-verde);
  --warn:    #E07400;   /* atraso / risco / atenção */
  --warn-bg: var(--grws-tint-laranja);
  --warn-strong: #C24F00;
  --track:   #E7EDF6;   /* barra vazia / mapa "sem pipeline" */

  --shadow-card: 0 1px 2px rgba(6,38,124,.05), 0 6px 20px rgba(6,38,124,.06);
  --shadow-pop:  0 12px 34px rgba(6,38,124,.16);

  --r:    12px;
  --r-sm: 8px;
  --r-lg: 18px;

  /* ============================================================
     COMPAT — mapeia os antigos --crm-* para o novo sistema.
     Páginas ainda não migradas recolorem automaticamente.
     ============================================================ */
  --crm-primary:       var(--c3);
  --crm-primary-dark:  var(--c1);
  --crm-primary-soft:  rgba(17,108,211,0.10);
  --crm-accent:        var(--c3);
  --crm-accent-soft:   var(--grws-tint-azul);

  --crm-sidebar-bg:    #082F97;
  --crm-sidebar-grad:  var(--sidebar-bg);

  --crm-bg:            var(--app-bg);
  --crm-surface:       var(--panel);
  --crm-surface-2:     var(--panel-inset);
  --crm-border:        var(--line);
  --crm-text:          var(--ink);
  --crm-text-muted:    var(--ink-muted);

  --crm-shadow-xs:     0 1px 2px rgba(6,38,124,0.06);
  --crm-shadow:        var(--shadow-card);
  --crm-shadow-md:     var(--shadow-pop);
  --crm-radius:        var(--r);
  --crm-radius-sm:     var(--r-sm);
  --crm-radius-lg:     var(--r-lg);

  /* estágios — mapeamento canônico (escala azul; ver grws-components.css) */
  --stage-descobrimento: #2F7BD9;
  --stage-homologacao:   #1C66C9;
  --stage-proposta:      #0E55B5;
  --stage-negociacao:    #0A3D93;
  --stage-fechamento:    #0E8A3E;
  --stage-perda:         #4A5468;
  --stage-onhold:        var(--ink-subtle);

  /* prioridade — A laranja (atenção) · B azul · C neutro */
  --priority-a: var(--warn-strong);
  --priority-b: var(--c3);
  --priority-c: var(--ink-subtle);
}

/* =====================================================================
   TEMA ESCURO — sob html.dark (casa com PrimeVue Aura darkModeSelector)
   ===================================================================== */
html.dark {
  /* Layering coeso: canvas (mid-navy) < cards (mais claros). Evita o "buraco"
     escuro entre a sidebar e o conteúdo — o gutter agora é da família navy. */
  --app-bg:        #0A1A3C;
  --panel:         #102554;
  --panel-2:       #0D1F48;
  --panel-inset:   #163063;
  --ink:           #EAF1FF;
  /* Dark: textos secundários eram cinza-azulado escuro e "sumiam" no fundo —
     agora um branco suave (não pleno) com leve tom frio, legível mas hierárquico. */
  --ink-muted:     #CBD8F2;
  --ink-subtle:    #A6B6D9;
  --line:          rgba(255,255,255,.09);
  --line-soft:     rgba(255,255,255,.06);
  --line-strong:   rgba(255,255,255,.16);

  --sidebar-bg:    linear-gradient(185deg, #07235F 0%, #030F33 100%);
  --topbar-bg:     rgba(8,24,62,0.82);

  --c1: #0B49A8;
  --c2: #1E6BE0;
  --c3: #3F92F4;
  --c4: #5FB0FF;
  --c5: #8CCBFF;
  --c6: #BEE2FF;
  --c-grad: linear-gradient(180deg, #6FB6FF 0%, #3F92F4 60%, #1E6BE0 100%);

  --pos:     #3FD587;
  --pos-bg:  rgba(63,213,135,.14);
  --warn:    #FFB04A;
  --warn-bg: rgba(255,176,74,.14);
  --warn-strong: #FFC472;
  --track:   rgba(255,255,255,.07);

  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  --shadow-pop:  0 16px 40px rgba(0,0,0,.5);

  /* compat dark */
  --crm-primary-soft: rgba(63,146,244,0.16);
  --crm-accent-soft:  rgba(63,146,244,0.16);
  --crm-sidebar-bg:   #07235F;

  --stage-descobrimento: #BEE2FF;
  --stage-homologacao:   #8CCBFF;
  --stage-proposta:      #6FB6FF;
  --stage-negociacao:    #5FA8FF;
  --stage-fechamento:    var(--pos);
  --stage-perda:         #93A3C4;
}