/* ============================================================
   SHENLONG — Design Tokens (v2.0 "Prancheta" + nav grafite v3)
   Fonte da verdade: DESIGN.md
   Estas variáveis são o ponto único de tema. A futura tela de
   Configurações (marca leve) sobrescreve --brand, logo, etc. aqui.
   ============================================================ */
:root {
  /* Superfícies — neutros frios (NUNCA cream/bege)
     Redesign v2 (jul/2026): fundo externo mais escuro (--mist), app "flutuando"
     num container claro; cards SEM borda, separados por sombra. */
  --mist:        #E7E9ED;  /* fundo externo, atrás do app */
  --bg:          #EFF4F9;  /* fundo interno do app (canvas) */
  --surface:     #FFFFFF;
  --surface-2:   #F1F3F6;
  --panel-nav:   #FAFBFC;
  --border:      #E4E7EB;
  --border-soft: #ECEEF1;
  --border-tab:  #D9DEE5;  /* borda da aba de contexto ativa */

  /* Texto */
  --ink:    #17191E;
  --muted:  #5C626D;
  --faint:  #858C97;

  /* Marca e ação primária */
  --brand:    #1B3F9E;
  --brand-2:  #16327E;
  --brand-bg: #E9EFFB;

  /* COR = ESTADO. Etapa do fluxo (jobs) — nunca o tipo.
     10 etapas reais (confirmadas com a Mariana). Cores baseadas no sistema atual
     da equipe, ajustadas para contraste de leitura (texto/dot = tom médio; -bg = tinta clara).
     Obs.: com 10 etapas, o NOME da etapa aparece sempre — a cor apoia, não substitui. */
  /* paleta vibrante (jul/2026): cor cheia p/ header do Kanban (texto branco) +
     bg claro p/ corpo da coluna. Tons mais saturados = menos "lavado". */
  --st-plan: #2E6BE0;  --st-plan-bg: #E6EEFC;  /* 1 Planejamento          azul    */
  --st-orc:  #C2761A;  --st-orc-bg:  #F8EEDC;  /* 2 Orçamento             âmbar   */
  --st-red:  #B23F9E;  --st-red-bg:  #F7E5F3;  /* 3 Redação               orquídea*/
  --st-foto: #D24E86;  --st-foto-bg: #FBE7EF;  /* 4 Foto/Vídeo            rosa    */
  --st-edi:  #7A4FD6;  --st-edi-bg:  #EFE9FB;  /* 5 Edição/Programação    violeta */
  --st-apr:  #4C60D4;  --st-apr-bg:  #E8EBFB;  /* 6 Aprovação             pervinca*/
  --st-prod: #A87C0E;  --st-prod-bg: #F5EDD5;  /* 7 Produção              ouro    */
  --st-pag:  #2A8C4A;  --st-pag-bg:  #E4F3E9;  /* 8 Pagamento             verde-c */
  --st-div:  #12839A;  --st-div-bg:  #E0F1F4;  /* 9 Divulgação/Distrib.   teal    */
  --st-fin:  #1C8C5E;  --st-fin-bg:  #E3F4EC;  /* 10 Finalizado           verde   */

  /* STATUS / saúde — atravessa qualquer etapa */
  --late: #C13B2E;  --late-bg: #FAE7E4;  /* atrasado / bloqueado / crítico */
  --warn: #FFA800;  --warn-bg: #F4EEDA;  /* atenção / risco / pendente */
  --ok:   #2D7A5F;  --ok-bg:   #E6F3ED;  /* saudável / pago / no prazo */

  --neutral-bg:#F1F2F4;

  /* PALETA DE SÉRIE (gráfico) — 17/set/2026.
     Ordem FIXA, nunca reciclada: uma série ganha o slot e fica com ele.
     Derivada dos tokens de etapa (--st-plan, --st-orc, --st-div, --st-edi),
     de --ok e de --hue-orange, clareada até passar nos testes de contraste
     (>= 3:1 sobre branco) e de separação para daltonismo.

     Isto NÃO contradiz "COR = ESTADO": estado continua sendo --ok/--warn/
     --late e etapa continua sendo --st-*. Esta paleta identifica SÉRIE
     dentro de um gráfico (a linha do CPL, a do CTR), que é coisa que o
     sistema não tinha. Fora de gráfico e de sparkline, não usar. */
  --s1:#2E6BE0;  --s1-bg:#E6EEFC;   /* azul     — leads, CPL, CPC       */
  --s2:#C2761A;  --s2-bg:#F8EEDC;   /* âmbar    — investimento, CPM     */
  --s3:#0E9AB5;  --s3-bg:#E0F1F4;   /* teal     — visitas, CTR          */
  --s4:#D9603A;  --s4-bg:#FBE9E2;   /* laranja  — CPV, VGV              */
  --s5:#1F9E68;  --s5-bg:#E3F4EC;   /* verde    — vendas                */
  --s6:#7A4FD6;  --s6-bg:#EFE9FB;   /* violeta  — conversão, custo/view */

  /* Paleta crua de matizes — APENAS para avatares/ilustração/identificação de pessoa.
     NUNCA usar para comunicar estado (use --st-* / --late / --warn / --ok). */
  --hue-violet: #6B5AA0;
  --hue-blue:   #1B3F9E;
  --hue-green:  #2D7A5F;
  --hue-amber:  #B07512;
  --hue-orange: #C8502A;
  --hue-steel:  #45688A;

  /* Rail de navegação — grafite (v2: "dock", ativo = quadrado branco) */
  --rail:        #20242A;
  --rail-border: #2A2F37;
  --rail-ic:     #9299A4;
  --rail-hover:  #2A2F37;

  /* Tipografia */
  --font-ui:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, "Helvetica Neue", Arial, sans-serif;
  /* Dados também na fonte nativa (jul/2026): a Roboto Mono renderizava o zero CORTADO — a equipe não quer.
     Nativa tem zero limpo; alinhamento de coluna vem de `font-variant-numeric: tabular-nums` (base.css/body). */
  --font-mono: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, "Helvetica Neue", Arial, sans-serif;

  /* Sombras (discretas, nunca coloridas) — v2: sombra substitui borda nos cards */
  --sh-1: 0 2px 7px rgba(23,25,30,.055);
  --sh-2: 0 6px 14px rgba(23,25,30,.075);
  --sh-chrome: 0 1px 3px rgba(23,25,30,.06);   /* busca, botões redondos, aba ativa */
  --sh-app: 0 8px 28px rgba(31,36,43,.08);     /* container do app sobre o mist */
  --sh-modal: 0 16px 46px rgba(23,25,30,.18);

  /* Raios */
  --r-card:  14px;
  --r-input: 9px;
  --r-btn:   9px;
  --r-tag:   6px;
  --r-modal: 16px;

  /* Curva de animação padrão */
  --ease: cubic-bezier(.22,1,.36,1);

  /* Camadas */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-backdrop: 300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}