/* =====================================================================
   kit/tokens.css — vocabulario visual do Portal do RH.

   Carregado em 4 camadas, nesta ordem: tokens -> animations ->
   components -> app. Cada camada só depende das anteriores, entao trocar
   a paleta aqui repinta o produto inteiro sem tocar em template nenhum.

   Regra da casa: nenhum template declara cor, raio, sombra ou duracao
   em valor cru. Se falta um valor, ele nasce aqui.
   ===================================================================== */

:root {
  /* ===================== PALETA — 8 cores ativas =====================
     Cada cor tem semantica propria. Verde NAO e' cor de categoria: ele
     marca decisao (CTA, valor-chave, sinal positivo). Se tudo e' verde,
     nada e' verde.

       accent   verde    confirmado, aprovado, CTA
       info     azul     dado neutro, referencia, contagem do mes
       warning  ambar    pendente, aguardando acao
       danger   vermelho cancelado, destrutivo, risco
       rose     rosa     pessoa, contato, relacionamento
       violet   violeta  documento, contrato, anexo
       cyan     ciano    origem/descoberta (formulario publico)
       orange   laranja  em aberto, fila                                 */
  --accent: #09bc8a;
  --accent-hover: #35d999;
  --info: #3a7ef0;
  --warning: #f0a020;
  --danger: #e8484a;
  --rose: #e8649a;
  --violet: #9b7ef0;
  --cyan: #22c6d4;
  --orange: #f97316;

  /* soft = 10% (fundo de badge/pilula) · border = 28% (contorno).
     Badge sempre com borda: em fundo escuro, fundo 10% sozinho quase nao
     se ve — a borda e' o que da forma. */
  --accent-soft: rgba(9, 188, 138, .10);
  --accent-border: rgba(9, 188, 138, .28);
  --info-soft: rgba(58, 126, 240, .10);
  --info-border: rgba(58, 126, 240, .28);
  --warning-soft: rgba(240, 160, 32, .10);
  --warning-border: rgba(240, 160, 32, .28);
  --danger-soft: rgba(232, 72, 74, .10);
  --danger-border: rgba(232, 72, 74, .28);
  --rose-soft: rgba(232, 100, 154, .10);
  --rose-border: rgba(232, 100, 154, .28);
  --violet-soft: rgba(155, 126, 240, .10);
  --violet-border: rgba(155, 126, 240, .28);
  --cyan-soft: rgba(34, 198, 212, .10);
  --cyan-border: rgba(34, 198, 212, .28);
  --orange-soft: rgba(249, 115, 22, .10);
  --orange-border: rgba(249, 115, 22, .28);

  /* gradientes por cor — barras, trilhos, acentos */
  --gradient-accent: linear-gradient(135deg, #35d999, #09bc8a);
  --gradient-info: linear-gradient(135deg, #6fa3f5, #3a7ef0);
  --gradient-warning: linear-gradient(135deg, #f7bd5c, #f0a020);
  --gradient-danger: linear-gradient(135deg, #f07577, #e8484a);
  --gradient-rose: linear-gradient(135deg, #f18fb5, #e8649a);
  --gradient-violet: linear-gradient(135deg, #b9a3f5, #9b7ef0);
  --gradient-cyan: linear-gradient(135deg, #5fdae4, #22c6d4);
  --gradient-orange: linear-gradient(135deg, #fb9553, #f97316);

  /* Titulo "caro": branco esmaecendo pra cinza, com clip no texto. */
  --gradient-text: linear-gradient(180deg, #ffffff, #b7bac6);
  /* Divisoria que esvai nas duas pontas — nunca linha chapada. */
  --gradient-divider: linear-gradient(90deg, var(--border-default), rgba(255, 255, 255, 0));

  /* ===================== SUPERFICIES ===================== */
  --bg: #0a0c10;
  --surface-1: #14161c;     /* topbar, cards, painel */
  --surface-2: #1a1d25;     /* elemento dentro de card */
  --surface-3: #22262f;     /* hover, trilha de progresso */

  --border-subtle: rgba(255, 255, 255, .07);
  --border-default: #272b35;
  --border-accent: rgba(9, 188, 138, .28);

  --text-primary: #edeff3;
  --text-secondary: #b7bac6;
  --text-muted: #737784;
  /* Texto sobre fundo verde solido (botao primario, tile da marca). */
  --text-on-accent: #04120e;

  /* ===================== TIPOGRAFIA ===================== */
  --text-xs: 11.5px;
  --text-sm: 12.5px;
  --text-base: 13.5px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --font-sans: "Montserrat", -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Wordmark da marca. So existe o peso Regular do arquivo. */
  --font-marca: "Ethnocentric", var(--font-sans);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ===================== ESPACO / RAIO ===================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-md: 12px;
  --radius-card: 14px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* ===================== SOMBRA EM CAMADAS =====================
     O que da a sensacao de "caro" nao e' uma sombra forte: e' a soma de
     (1) fio de luz de 1px no topo, (2) sombra curta e escura logo abaixo
     do elemento e (3) sombra longa e difusa que o separa do fundo. Uma
     sombra unica de raio grande so deixa tudo borrado. */
  --card-edge: inset 0 1px 0 rgba(255, 255, 255, .05);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 12px -4px rgba(0, 0, 0, .5);
  --shadow-lg: 0 12px 28px -12px rgba(0, 0, 0, .55);
  --shadow-xl: 0 24px 60px -20px rgba(0, 0, 0, .7);
  --shadow-card: 0 12px 28px -14px rgba(0, 0, 0, .6), 0 34px 64px -32px rgba(0, 0, 0, .5);
  --shadow-card-hover: 0 16px 34px -14px rgba(0, 0, 0, .66), 0 44px 78px -34px rgba(0, 0, 0, .56);
  --shadow-accent: 0 8px 20px -7px rgba(9, 188, 138, .4);
  --shadow-accent-lg: 0 14px 34px -10px rgba(9, 188, 138, .5);

  /* ===================== FUNDO AMBIENTE =====================
     Textura de pontos + aurora. Fundo chapado em tela grande fica
     "vazio"; a textura da materia sem competir com o conteudo. */
  --watermark: rgba(255, 255, 255, .03);
  --dot-grid: rgba(255, 255, 255, .022);
  --dot-size: 22px;
  --aurora-1: rgba(9, 188, 138, .10);
  --aurora-2: rgba(58, 126, 240, .07);

  /* ===================== MOVIMENTO =====================
     Curvas, nao `ease` solto: `ease` acelera e freia igual, o que soa
     robotico. --ease-saida chega rapido e freia devagar; --ease-mola
     passa ~4% do alvo e volta, o que da peso a entrada de algo novo.
     Nada aqui passa de .4s — acima disso deixa de parecer resposta e
     comeca a parecer espera. */
  --ease-saida: cubic-bezier(.2, .7, .3, 1);
  --ease-mola: cubic-bezier(.34, 1.32, .5, 1);
  --ease-suave: cubic-bezier(.45, 0, .4, 1);

  --dur-rapida: .16s;
  --dur-base: .26s;
  --dur-lenta: .38s;
  --fila-passo: .045s;      /* atraso entre itens de uma fila (stagger) */

  --transition-fast: .12s var(--ease-saida);
  --transition-base: .18s var(--ease-saida);
  --transition-slow: .32s var(--ease-saida);

  /* ===================== CAMADAS ===================== */
  --z-dropdown: 100;
  --z-sidebar: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ===================== MEDIDAS DO SHELL ===================== */
  --topbar-altura: 60px;
  --tabbar-altura: 62px;
  --largura-max: 1560px;
}

/* Fonte da marca (wordmark "NEXI"). Somente o peso Regular existe no
   arquivo — negrito, quando aparece, e' sintetico. */
@font-face {
  font-family: "Ethnocentric";
  src: url("/static/fonts/Ethnocentric-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}