/* ============================================================
   UNEVEN MEDIA — design system · tokens
   Fonte única de cor, tipo, espaço e forma para TODA interface
   da Uneven (painel do cliente, páginas do n8n, site, mockups).
   Extraído de UNEVEN-CONTEXTO.md §4 (inspeção do site ao vivo).
   Regra: nenhum arquivo de UI escreve cor, fonte ou raio fora
   destes tokens. O lint (lint-aderencia.js) barra o que escapar.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- Cor: monocromático. Não existe cor de marca. ---- */
  --un-bg:        #08090B;   /* fundo da página */
  --un-bg-deep:   #000000;   /* preto puro, só para áreas de foto/vídeo */
  --un-panel:     #101216;   /* cards, painéis */
  --un-panel-2:   #15181D;   /* card sobre card, hover */
  --un-line:      #2B2E35;   /* hairline padrão */
  --un-line-soft: #1A1D22;   /* hairline interna (linhas de tabela) */
  --un-txt:       #FFFFFF;   /* título, número grande */
  --un-txt-2:     #B6BBC2;   /* segunda parte do título em dois tons */
  --un-body:      #D2D5D9;   /* texto corrido */
  --un-muted:     #8B9098;   /* secundário */
  --un-faint:     #5A5F68;   /* fraco, rodapé, placeholder */

  /* Hairlines em branco com opacidade (o site usa 10–16%) */
  --un-hair-10:   rgba(255,255,255,.10);
  --un-hair-16:   rgba(255,255,255,.16);

  /* Estado — a ÚNICA cor permitida fora do mono, e só em sinal de estado
     (ponto, pill, borda). Nunca em fundo grande, título ou botão. */
  --un-ok:        #7FD69A;
  --un-warn:      #C9A227;
  --un-bad:       #E06A5C;
  --un-ok-soft:   rgba(127,214,154,.12);
  --un-warn-soft: rgba(201,162,39,.12);
  --un-bad-soft:  rgba(224,106,92,.12);
  --un-ok-ring:   rgba(127,214,154,.45);  /* anel do ponto "ao vivo" */
  --un-ok-ring-0: rgba(127,214,154,0);

  /* UI real de terceiros dentro de mockups (não é marca) */
  --un-whatsapp:  #25D366;

  /* ---- Tipografia ---- */
  --un-font-ui:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --un-font-body:  "Source Serif 4", Georgia, "Times New Roman", serif;
  --un-font-mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Escala. Títulos: Manrope 700/800, caixa baixa, tracking −3%, entrelinha ~1.03 */
  --un-h1: 800 40px/1.03 var(--un-font-ui);
  --un-h2: 700 26px/1.08 var(--un-font-ui);
  --un-h3: 700 18px/1.15 var(--un-font-ui);
  --un-kpi: 800 34px/1 var(--un-font-ui);       /* número grande */
  --un-body-md: 400 16px/1.55 var(--un-font-body);
  --un-body-lg: 400 20px/1.55 var(--un-font-body);
  --un-ui-md: 600 14px/1.3 var(--un-font-ui);   /* botões, nav */
  --un-ui-sm: 600 13px/1.3 var(--un-font-ui);
  --un-label: 500 10.5px/1.4 var(--un-font-mono); /* etiquetas: CAIXA ALTA, tracking +8% */
  --un-mono-sm: 400 12px/1.5 var(--un-font-mono);

  --un-track-tight: -0.03em;   /* títulos */
  --un-track-label: 0.08em;    /* etiquetas mono em caixa alta */
  --un-track-wordmark: 0.22em; /* UNEVEN MEDIA */

  /* ---- Espaço (base 4) ---- */
  --un-s1: 4px;  --un-s2: 8px;  --un-s3: 12px; --un-s4: 16px;
  --un-s5: 20px; --un-s6: 24px; --un-s8: 32px; --un-s10: 40px;
  --un-s12: 48px; --un-s16: 64px;

  /* ---- Forma ---- */
  --un-r-sm: 6px;
  --un-r-md: 8px;
  --un-r-lg: 12px;
  --un-r-pill: 999px;
  --un-hairline: 1px solid var(--un-line);

  /* ---- Movimento ---- */
  --un-ease: cubic-bezier(.2,.7,.2,1);
  --un-fast: 120ms;
  --un-slow: 320ms;

  /* ---- Layout ---- */
  --un-sidebar: 232px;
  --un-topbar: 56px;
  --un-content-max: 1240px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --un-fast: 0ms; --un-slow: 0ms; }
}