/* dado.cloud — design tokens
   Fonte única de verdade para cor, tipo, espaço, raio e sombra.
   Importe uma vez no root da aplicação. Não redefina valores fora deste arquivo. */

:root {
  /* ---- Cor: marca e ação ---- */
  --dado-accent:            #2E6FF2;  /* ação, seleção, série principal de gráfico */
  --dado-accent-hover:      #1D55C8;
  --dado-accent-tint:       #EAF0FD;  /* fundo de chip e botão suave */
  --dado-accent-tint-strong:#DCE7FB;  /* hover do botão suave */
  --dado-accent-soft:       #8FB1FF;  /* série secundária, medidor baixo */
  --dado-accent-pale:       #C7D9FB;  /* terceira série, fatia de donut */

  /* ---- Cor: acento do Bom de Papo (única exceção de cor por produto) ----
     Escopado ao conteúdo das telas do Bom de Papo (botões, card de destaque,
     gráficos) — a navegação (sidebar/topbar) e o resto do app seguem no
     --dado-accent azul. Não usar fora do Bom de Papo. */
  --dado-bomdepapo-accent:            #7C5CFC;
  --dado-bomdepapo-accent-hover:      #6339E8;
  --dado-bomdepapo-accent-tint:       #F2EEFE;
  --dado-bomdepapo-accent-tint-strong:#E6DCFC;
  --dado-bomdepapo-accent-soft:       #B7A0FA;
  --dado-bomdepapo-accent-pale:       #D9CCFB;
  --dado-bomdepapo-deep:              #2A1B5C;
  --dado-bomdepapo-deep-panel:        #3A2B70;
  --dado-bomdepapo-deep-line:         #4A3A8A;
  --dado-bomdepapo-on-deep:           #C6B8F7;
  --dado-bomdepapo-on-deep-muted:     #B7A0FA;

  /* ---- Cor: superfícies escuras ---- */
  --dado-navy:              #0B1B3B;  /* sidebar admin */
  --dado-deep:              #0E2A66;  /* card de destaque, badge Enterprise */
  --dado-deep-panel:        #162952;  /* bloco interno em card escuro (use com 80% alpha) */
  --dado-deep-line:         #1F3A72;  /* borda dentro de card escuro */
  --dado-deep-card:         #12244C;  /* card de status na sidebar */
  --dado-on-deep:           #B9CBF2;  /* texto secundário sobre escuro */
  --dado-on-deep-muted:     #8FB1FF;
  --dado-on-deep-faint:     #5A729F;  /* rótulos de grupo na sidebar */
  --dado-deep-hover:        #1B2F5C;  /* hover de item de sidebar */

  /* ---- Cor: texto e superfícies claras ---- */
  --dado-ink:               #0E1B33;  /* texto principal */
  --dado-slate:             #5C6B8A;  /* texto secundário */
  --dado-muted:             #8A97B3;  /* auxiliar, rótulos, timestamps */
  --dado-faint:             #B6C1D6;  /* desabilitado, chevron */
  --dado-line:              #E8EDF7;  /* borda de card */
  --dado-line-soft:         #EEF2FA;  /* grade de gráfico, divisória de header */
  --dado-line-row:          #F4F7FC;  /* divisória entre linhas de tabela */
  --dado-line-input:        #E1E8F5;  /* borda de input e botão secundário */
  --dado-surface:           #FAFBFE;  /* fundo da página e hover de linha */
  --dado-surface-alt:       #F2F5FB;  /* trilho de barra, chip neutro */
  --dado-surface-tint:      #F6F9FF;  /* linha selecionada */
  --dado-white:             #FFFFFF;

  /* ---- Cor: semântica ---- */
  --dado-success:           #16A34A;
  --dado-success-bg:        #EAF5EC;
  --dado-warning:           #F0A63A;
  --dado-warning-bg:        #FEF6EA;
  --dado-warning-ink:       #B07816;  /* texto sobre warning-bg */
  --dado-warning-on-deep:   #FFC46B;  /* número de alerta em card escuro */
  --dado-danger:            #DC2626;
  --dado-danger-bg:         #FEF2F2;
  --dado-danger-line:       #FBE0E0;
  --dado-neutral-dot:       #C3CCDE;  /* status inativo/cancelado */

  /* ---- Cor: planos ---- */
  --dado-plan-enterprise-bg:#0E2A66; --dado-plan-enterprise-fg:#FFFFFF;
  --dado-plan-pro-bg:       #EAF0FD; --dado-plan-pro-fg:       #2E6FF2;
  --dado-plan-business-bg:  #F0F4FE; --dado-plan-business-fg:  #4B6EA8;
  --dado-plan-starter-bg:   #F4F6FB; --dado-plan-starter-fg:   #5C6B8A;

  /* ---- Tipografia ---- */
  --dado-font-display: 'Space Grotesk', system-ui, sans-serif; /* títulos */
  --dado-font-body:    'Archivo', system-ui, sans-serif;        /* textos e UI */
  --dado-font-mono:    'JetBrains Mono', ui-monospace, monospace; /* números, datas, IDs */

  --dado-text-hero:    600 34px/1.15 var(--dado-font-display);
  --dado-text-page:    600 21px/1.25 var(--dado-font-display);
  --dado-text-section: 600 15.5px/1.3 var(--dado-font-display);
  --dado-text-card:    600 14.5px/1.3 var(--dado-font-display);
  --dado-text-body:    400 14px/1.6 var(--dado-font-body);
  --dado-text-ui:      400 13px/1.45 var(--dado-font-body);
  --dado-text-sm:      400 12.5px/1.45 var(--dado-font-body);
  --dado-text-xs:      400 12px/1.45 var(--dado-font-body);
  --dado-text-metric:  600 32px/1 var(--dado-font-mono);
  --dado-text-metric-sm: 600 26px/1 var(--dado-font-mono);
  --dado-text-data:    500 12.5px/1.3 var(--dado-font-mono);
  --dado-text-th:      500 10px/1.2 var(--dado-font-mono);  /* + letter-spacing .06em, caixa alta */
  --dado-text-label:   500 9.5px/1.2 var(--dado-font-mono); /* + letter-spacing .07em, caixa alta */

  --dado-tracking-display: -0.02em;
  --dado-tracking-caps:     0.06em;

  /* ---- Espaço ---- */
  --dado-gap-card:     14px;  /* entre cards de uma mesma linha */
  --dado-gap-section:  16px;  /* entre blocos verticais */
  --dado-pad-card:     22px;  /* padding interno de card padrão */
  --dado-pad-kpi:      20px;
  --dado-pad-page:     24px 30px 40px;  /* admin */
  --dado-pad-row:      13px 22px;       /* linha de tabela */

  /* ---- Raio ---- */
  --dado-radius-card:  16px;
  --dado-radius-hero:  18px;  /* bloco de destaque grande */
  --dado-radius-md:    12px;  /* card interno, tile */
  --dado-radius-btn:   10px;
  --dado-radius-sm:    9px;   /* tile de ícone, botão pequeno */
  --dado-radius-chip:  6px;
  --dado-radius-pill:  999px;

  /* ---- Sombra ---- */
  --dado-shadow-knob:   0 1px 2px rgba(14,27,51,.15);
  --dado-shadow-seg:    0 1px 2px rgba(14,27,51,.08);
  --dado-shadow-drawer: -20px 0 60px rgba(11,27,59,.18);
  --dado-overlay:       rgba(11,27,59,.30);

  /* ---- Movimento ---- */
  --dado-ease:          cubic-bezier(.2,.8,.2,1);
  --dado-dur-hover:     .15s;
  --dado-dur-enter:     .45s;
  --dado-dur-draw:      1.2s;

  /* ---- Layout ---- */
  --dado-sidebar-w:     236px;
  --dado-admin-min-w:   1180px;
  --dado-client-max-w:  1360px;
  --dado-drawer-w:      410px;
}

/* Animações de entrada. Nunca em loop, exceto --pulse (um por tela). */
@keyframes dado-fade-up { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
@keyframes dado-fade-in { from { opacity:0 } to { opacity:1 } }
@keyframes dado-grow    { from { transform:scaleY(0) } to { transform:scaleY(1) } }
@keyframes dado-draw    { from { stroke-dashoffset:1400 } to { stroke-dashoffset:0 } }
@keyframes dado-ring    { from { stroke-dasharray:0 400 } }
@keyframes dado-slide-in{ from { opacity:0; transform:translateX(28px) } to { opacity:1; transform:none } }
@keyframes dado-pulse   {
  0%   { box-shadow:0 0 0 0 rgba(22,163,74,.45) }
  70%  { box-shadow:0 0 0 7px rgba(22,163,74,0) }
  100% { box-shadow:0 0 0 0 rgba(22,163,74,0) }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}