/* =============================================================================
   tokens.css
   Única fonte de cor, fonte, espaço, raio e sombra do app (Sistema_de_Estilos). Identidade Konnect (Fase 18).
   Tema claro em :root; par escuro em [data-theme="dark"] (decisão cravada no 00_GENESIS/LASTRO.md).
   PROIBIDO hex fora deste arquivo.
   ============================================================================= */

:root {
  color-scheme: light;

  /* Marca Konnect (Fase 18): grafite e laranja da logo dos elos (identidade_visual_app.md), exceção ao Sage & Creme
     por decisão do Fábio. Contraste medido (WCAG):
     - botão primário: degradê --cor-primaria-hover (#c94a00, 4,71:1) até --cor-primaria-escura (#a63d00, 6,39:1),
       letra branca;
     - --cor-primaria (#e65a00) é ícone e destaque (3,6:1 no branco, passa para ícone); letra sobre ela, preta (5,83:1);
     - letra na cor da marca: --cor-primaria-texto (#b34200, 5,35:1 no --fundo) ou a escura (5,73:1 no -suave). */
  --cor-primaria: #e65a00;
  --cor-primaria-hover: #c94a00;
  --cor-primaria-escura: #a63d00;
  --cor-primaria-suave: #fff0e5;
  --cor-primaria-soft: rgba(230, 90, 0, .12);
  --cor-primaria-sombra: rgba(230, 90, 0, .16);
  --cor-primaria-texto: #b34200;
  --texto-sobre-cor-primaria: #000000;
  --texto-sobre-cor-primaria-escura: #ffffff;

  /* Superfícies e texto */
  --fundo: #f7f8fa;
  --branco: #ffffff;
  --borda: #dee2e7;
  --borda-forte: #c5cbd3;
  --texto: #20242b;
  --texto-suave: #2e343d;
  --texto-secundario: #4a515c;
  --texto-fraco: #5c6470;          /* 5,63:1 sobre --fundo */

  /* Estados: perigo em vermelho, para não se confundir com o laranja da marca */
  --sucesso: #16a34a;
  --sucesso-suave: #e6f4ea;
  --sucesso-borda: #bfe0c8;
  --sucesso-texto: #1f6b3a;
  --perigo: #c62828;
  --perigo-suave: #fdecec;
  --perigo-borda: #f3c4c4;
  --perigo-texto: #a61b1b;
  --aviso-suave: #fff6db;
  --aviso-borda: #f0dc9c;
  --aviso-texto: #6b5200;
  --aviso-fundo-linha: #fffbef;  /* linha aguardando na fila: o aviso-suave clareado, sem disputar com o badge */
  --info-suave: #e7f0f8;
  --info-borda: #c3d6e8;
  --info-texto: #2a4d6e;

  /* Sombras */
  --sombra: 0 1px 6px rgba(32, 36, 43, .08);
  --sombra-hover: 0 6px 18px rgba(32, 36, 43, .12);
  --sombra-overlay: rgba(16, 18, 22, .45);
  --sombra-md: 0 8px 24px rgba(32, 36, 43, .14);
  --sombra-lg: 0 20px 50px rgba(32, 36, 43, .25);
  --sombra-primaria: rgba(201, 74, 0, .22);
  --sombra-primaria-forte: rgba(201, 74, 0, .34);
  --contorno-ativo: rgba(255, 255, 255, .40);
  --bolinha-toggle: #ffffff;
  --sombra-bolinha: rgba(0, 0, 0, .25);
  --lote-fundo: #252a33;             /* faixa da seleção em lote: grafite, não na cor da marca */
  --lote-texto: #f5f6f8;
  --lote-borda: rgba(245, 246, 248, .32);
  --lote-sombra: 0 -4px 24px rgba(0, 0, 0, .20);
  --logo-superficie: #ffffff;       /* atrás da logo, nos dois temas */
  --campo: #ffffff;                  /* fundo de campo de texto */

  /* Tipografia: Poppins (Fase 18), servida pelo próprio site; títulos na mesma família, peso 600 */
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titulo: "Poppins", system-ui, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 26px;

  /* Espaço */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* Raio */
  --raio-sm: 8px;
  --raio: 12px;
  --raio-lg: 18px;
  --raio-full: 9999px;

  --transicao: .18s ease;

  /* Chrome e controles */
  --sidebar-width: 248px;
  --topbar-h: 58px;
  --h-controle: 40px;        /* Padrao_Formulario */
  --h-controle-sm: 36px;     /* menu sanduíche da tabela */
  --h-presets: 38px;         /* multi opções e barra de filtros (Padrao_Barra_de_Filtros, --fu-h) */
  --raio-presets: 7px;       /* multi opções (Padrao_Toggle_Tipos) */
  --raio-presets-item: 5px;
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Marca no escuro: laranja vivo com letra grafite (6,77:1 no #ff7900; 7,55:1 no #ff8a1f); letra na cor da marca
     #ff9b3d (8,48:1 no fundo, 6,87:1 no card). */
  --cor-primaria: #ff7900;
  --cor-primaria-hover: #ff7900;
  --cor-primaria-escura: #ff8a1f;
  --cor-primaria-suave: #49301f;
  --cor-primaria-soft: rgba(255, 121, 0, .16);
  --cor-primaria-sombra: rgba(0, 0, 0, .35);
  --cor-primaria-texto: #ff9b3d;
  --texto-sobre-cor-primaria: #15181d;
  --texto-sobre-cor-primaria-escura: #15181d;

  --fundo: #15181d;
  --branco: #252a33;
  --borda: #414852;
  --borda-forte: #565e6a;
  --texto: #f5f6f8;
  --texto-suave: #dfe3e8;
  --texto-secundario: #b4bbc5;
  --texto-fraco: #9aa2ad;          /* 5,59:1 sobre o card */

  --sucesso: #22c55e;
  --sucesso-suave: #17301f;
  --sucesso-borda: #2c5236;
  --sucesso-texto: #a7e3b9;
  --perigo: #f2667f;                 /* rosado: longe do laranja da marca */
  --perigo-suave: #3a1c26;
  --perigo-borda: #66303f;
  --perigo-texto: #f8b3c0;
  --aviso-suave: #352c12;
  --aviso-borda: #5c4c1c;
  --aviso-texto: #f0d27a;
  --aviso-fundo-linha: #2a2516;
  --info-suave: #1b2a38;
  --info-borda: #30475d;
  --info-texto: #b0cde6;

  --sombra: 0 1px 6px rgba(0, 0, 0, .35);
  --sombra-hover: 0 6px 18px rgba(0, 0, 0, .45);
  --sombra-overlay: rgba(0, 0, 0, .55);
  --sombra-md: 0 8px 24px rgba(0, 0, 0, .50);
  --sombra-lg: 0 20px 50px rgba(0, 0, 0, .60);
  --sombra-primaria: rgba(0, 0, 0, .35);
  --sombra-primaria-forte: rgba(0, 0, 0, .50);
  --contorno-ativo: rgba(21, 24, 29, .45);
  --bolinha-toggle: #f5f6f8;
  --sombra-bolinha: rgba(0, 0, 0, .50);
  --lote-fundo: #e6e9ed;             /* no tema escuro o contraste com a tela vem da faixa clara */
  --lote-texto: #20242b;
  --lote-borda: rgba(32, 36, 43, .30);
  --lote-sombra: 0 -4px 24px rgba(0, 0, 0, .45);
  --logo-superficie: #f5f6f8;
  --campo: #303640;
}

/* Menu lateral grafite nos dois temas (Fase 18): os tokens são redefinidos dentro dele, e as regras do layout.css
   seguem as mesmas. Letra clara: #f5f6f8 13,3:1 e o fraco #a3aab5 6,16:1 no #252a33; item ativo #ff9b3d 5,7:1. */
.sidebar {
  --branco: #252a33;
  --fundo: #303640;
  --borda: #3a404b;
  --texto: #f5f6f8;
  --texto-suave: #dfe3e8;
  --texto-secundario: #c3c9d1;
  --texto-fraco: #a3aab5;
  --cor-primaria-suave: #3d3530;
  /* No grafite, os laranjas do tema escuro com letra grafite: botão Início, avatar, badge e link do menu legíveis
     (#15181d sobre #ff7900 6,77:1; #ff8a1f sobre o menu 6,0:1). */
  --cor-primaria-hover: #ff7900;
  --cor-primaria-escura: #ff8a1f;
  --texto-sobre-cor-primaria-escura: #15181d;
  --nav-ativo-texto: #ff9b3d;      /* item ativo do menu */
  --sombra-primaria: rgba(0, 0, 0, .30);
  --sombra-primaria-forte: rgba(0, 0, 0, .45);
  color-scheme: dark;
}
[data-theme="dark"] .sidebar {
  --branco: #101216;
  --fundo: #22262e;
  --borda: #262b33;
}