/* tokens.css : a UNICA fonte de cor/medida do projeto.
   Cor sempre via var(--cor-primaria...). O hex da marca (#46A8C1) mora SO aqui,
   nunca em template. Familia escolhida na abertura: --cor-primaria (nao --accent).
   Derivada por paleta.py de #46A8C1. */

:root {
  /* Marca (derivada de #46A8C1 via paleta.py) */
  --cor-primaria:        #46A8C1;  /* tom vivo: preencher e contornar */
  --cor-primaria-hover:  #65B6CB;
  --cor-primaria-suave:  #E8F4F7;  /* bg de item ativo / realce leve (tema light) */
  --cor-primaria-escura: #2B6F80;  /* contorno/icone pequeno em fundo claro */
  --cor-primaria-texto:  #307C90;  /* LETRA da marca em fundo claro (4.76:1) */
  --cor-secundaria:      #14416E;  /* azul-marinho institucional, superficie/realce */
  --grafico-2:           #14416E;  /* 2a serie de grafico (marinho); clareia no dark */

  /* Estado */
  --sucesso: #16a34a;
  --sucesso-suave: #e6f6ec;   /* fundo pastel de sucesso (dropzone carregada) */
  --sucesso-forte: #15803d;   /* texto/borda de sucesso com contraste em fundo claro */
  --perigo:  #dc2626;
  --perigo-suave: #fdecec;    /* fundo pastel de perigo (KPI negativo) */
  --perigo-forte: #b91c1c;    /* texto/borda de perigo com contraste em fundo claro */
  --aviso:   #d97706;

  /* Superficie e texto : TEMA LIGHT (default) */
  --branco:            #ffffff;   /* superficie de card / sidebar */
  --fundo:             #f4f6f8;   /* fundo da pagina e hover */
  --fundo-2:           #eef1f4;
  --borda:             #e2e6ea;
  --texto:             #1a2430;
  --texto-secundario:  #46525f;
  --texto-suave:       #5b6773;
  --texto-fraco:       #8a949e;

  --sombra:       0 1px 3px rgba(16,36,48,.08), 0 4px 16px rgba(16,36,48,.05);
  --sombra-forte: 0 8px 28px rgba(16,36,48,.16);

  /* Tipografia : duas familias */
  --font:        "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titulo: "Sora", "Inter", sans-serif;

  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px;
  --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px;

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

  /* Raios, sombra de foco, transicao */
  --raio: 10px; --raio-sm: 6px; --raio-lg: 16px; --raio-full: 999px;
  --transicao: .16s ease;
  --foco: 0 0 0 3px var(--cor-primaria-suave);

  /* Casca */
  --sidebar-width: 248px;
  --topbar-h: 60px;
}

/* TEMA DARK : redefine so superficie/texto. A marca continua a mesma. */
:root[data-tema="dark"] {
  --branco:            #171b21;
  --fundo:             #0e1116;
  --fundo-2:           #1c222a;
  --borda:             #262d37;
  --texto:             #e8eaed;
  --texto-secundario:  #b6bdc6;
  --texto-suave:       #9aa2ac;
  --texto-fraco:       #6b7482;

  --cor-primaria-suave: rgba(70,168,193,.16);  /* bg de item ativo no escuro */
  --cor-primaria-texto: #7fc9db;               /* letra da marca no escuro */
  --grafico-2:          #6f9bd1;               /* marinho clareado: legivel no fundo escuro */

  --sucesso-suave: rgba(22,163,74,.18);        /* pastel de sucesso no escuro */
  --sucesso-forte: #4ade80;                    /* texto de sucesso legivel no escuro */
  --perigo-suave: rgba(220,38,38,.18);         /* pastel de perigo no escuro */
  --perigo-forte: #f87171;                     /* texto de perigo legivel no escuro */

  --sombra:       0 1px 3px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.35);
  --sombra-forte: 0 8px 28px rgba(0,0,0,.55);
  --foco: 0 0 0 3px rgba(70,168,193,.35);
}