/* ============================================================
   AAWZ — Tokens de design para ferramentas internas
   Fonte canônica de cores, tipografia, espaço e movimento.

   COMO USAR
   1. Copie este arquivo para o seu projeto (ex: src/assets/tokens.css)
   2. Importe-o UMA vez, no ponto de entrada do frontend
   3. Use SEMPRE a variável, nunca o valor: var(--color-primary)

   REGRA: se o valor que você quer não está aqui, ele não existe
   no produto. Peça para o z-designer decidir antes de inventar.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap");

:root {
  /* ============ MARCA ============ */
  --aawz-green:       #56AF79;  /* ação primária, estado ativo, sucesso */
  --aawz-green-light: #82FFB3;
  --aawz-green-dark:  #368B57;  /* hover do primário */
  --aawz-dark:        #030309;  /* sidebar, títulos de contraste máximo */
  --aawz-ink:         #242220;

  /* ============ NEUTROS ============ */
  --neutral-100: #F4F4F4;
  --neutral-200: #E4E4E4;
  --neutral-300: #D9D9D9;
  --neutral-400: #BEBEBE;
  --neutral-500: #AAAAAA;
  --neutral-600: #A4A4A4;
  --neutral-700: #8E8E8E;
  --neutral-800: #5B5B5B;
  --neutral-900: #4F4F4F;

  /* ============ TEXTO ============ */
  --text-primary:     #030309;
  --text-secondary:   #4F4F4F;
  --text-muted:       #8E8E8E;
  --text-placeholder: #6A7086;
  --text-inverse:     #FFFFFF;

  /* ============ SUPERFÍCIES ============ */
  --surface-canvas: #FFFFFF;  /* fundo da página: branco puro, nunca off-white */
  --surface-raised: #FFFFFF;  /* card */
  --surface-sunken: #F4F4F4;  /* área rebaixada, cabeçalho de tabela */
  --surface-dark:   #030309;
  --surface-scrim:  rgba(3, 3, 9, 0.6);  /* fundo do modal */

  /* ============ BORDAS ============ */
  --border-hairline: #EBEBEB;  /* divisores */
  --border-subtle:   #E4E4E4;
  --border-input:    #D9D9D9;  /* input em repouso */
  --border-strong:   #6A7086;  /* input em edição */
  --border-focus:    #56AF79;

  /* ============ FEEDBACK ============ */
  --color-primary:      #56AF79;
  --color-success:      #56AF79;
  --color-error:        #EB5757;
  --color-warning:      #E0AF00;
  --color-info:         #6A7086;
  --color-success-soft: rgba(86, 175, 121, 0.15);
  --color-error-soft:   rgba(235, 87, 87, 0.15);
  --color-warning-soft: rgba(224, 175, 0, 0.15);
  /* pares "-text": use quando a cor virar TEXTO, para garantir contraste */
  --color-success-text: #2E7D52;
  --color-error-text:   #C03939;
  --color-warning-text: #8A6A00;

  /* ============ GRÁFICOS ============ */
  /* Use nesta ordem. Azul Ciano é reservado para gráficos de 2 séries. */
  --chart-1: #1A2E66;  /* azul profundo */
  --chart-2: #245CA6;  /* azul royal   */
  --chart-3: #F5A623;  /* laranja      */
  --chart-4: #006D77;  /* azul petróleo*/
  --chart-5: #6C4F9B;  /* roxo         */
  --chart-6: #A8A8A8;  /* cinza premium*/
  --chart-negativo: #D9534F;
  --chart-ciano:    #00A6DE;

  /* ============ TIPOGRAFIA ============ */
  /* Se o projeto tiver as fontes da marca instaladas, elas vêm primeiro.
     Senão, Inter assume — é a substituta aprovada. */
  --font-display: "General Sans", "Proxima Nova", "Inter", system-ui, sans-serif;
  --font-body:    "Proxima Nova", "Inter", system-ui, sans-serif;
  --font-mono:    "Fira Code", ui-monospace, Menlo, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Escala de 6 tamanhos — cobre uma plataforma inteira. Não invente um sétimo. */
  --fs-kpi:     32px;  /* número grande de KPI            */
  --fs-page:    24px;  /* título da página (medido no print da plataforma) */
  --fs-section: 16px;  /* título de seção ou card         */
  --fs-body:    14px;  /* corpo do texto e dados          */
  --fs-aux:     12px;  /* auxiliar, legenda               */
  --fs-label:   11px;  /* rótulo e cabeçalho de tabela    */

  --lh-tight: 1.33;
  --lh-body:  1.5;
  --lh-loose: 1.6;

  /* ============ ESPAÇO — base 4px ============ */
  /* Todo espaço é múltiplo de 4. Não existe 5px, 13px, 30px. */
  --space-1:  4px;   /* colado                          */
  --space-2:  8px;   /* rótulo ↔ valor                  */
  --space-3:  12px;
  --space-4:  16px;  /* entre cards, entre campos       */
  --space-5:  20px;
  --space-6:  24px;  /* padding interno do card         */
  --space-7:  32px;  /* gutter da página, entre seções  */
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;

  /* ============ FORMA ============ */
  --radius-xs:   4px;   /* input, tag retangular */
  --radius-sm:   8px;
  --radius-md:   16px;  /* card, modal           */
  --radius-lg:   24px;
  --radius-pill: 9999px;

  /* ============ ELEVAÇÃO — 3 níveis, só ============ */
  --shadow-1: 0 0 16px rgba(0, 0, 0, 0.04);          /* card    */
  --shadow-2: 0 2px 24px -4px rgba(41, 15, 0, 0.12); /* popover */
  --shadow-3: 0 0 26px rgba(0, 0, 0, 0.25);          /* modal   */
  --shadow-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #56AF79;

  /* ============ MOVIMENTO ============ */
  /* Ferramenta financeira deve parecer precisa, não brincalhona:
     sem bounce, sem spring. Fade antes de slide; slide no máximo 8px. */
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);  /* entrar */
  --ease-in:  cubic-bezier(0.55, 0, 0.95, 0.32);  /* sair   */
  --dur-press: 120ms;
  --dur-hover: 200ms;
  --dur-pop:   240ms;
  --dur-modal: 320ms;
}

/* ============ PADRÕES DE ELEMENTO ============ */

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; }
h1 { font-size: var(--fs-page);    font-weight: var(--fw-semibold); }
h2 { font-size: var(--fs-section); font-weight: var(--fw-semibold); }
h3 { font-size: var(--fs-body);    font-weight: var(--fw-semibold); }

/* Número em tabela: sempre à direita e tabular, para as casas alinharem */
.num, td.num, th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Rótulo de seção em caixa alta — o ÚNICO lugar onde caixa alta é permitida */
.label {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Foco visível é acessibilidade: nunca remova o outline sem substituir */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}