/* ==========================================================
   Coliseu Cloud: TEMA
   Para mudar o visual, mude os valores abaixo.
   A cor principal (--cor) é trocada automaticamente pela marca
   do domínio (config.php), mas pode ser fixada aqui.
   ========================================================== */
:root {
  /* Marca */
  --cor: #0B119C;            /* azul A2: botões, links, item ativo */
  --cor-destaque: #E8622C;   /* laranja A2: estrela, avisos */
  --cor-suave: #e3e6fb;      /* fundo do item ativo e seleção */
  --cor-texto-sobre: #ffffff;/* texto em cima da cor principal */
  --logo-filtro: none;       /* no escuro, o logo fica branco */

  /* Superfícies */
  --fundo: #f6f8fc;          /* fundo geral da página */
  --painel: #ffffff;         /* lista, leitura, janela de escrever */
  --linha-hover: #f2f4f9;
  --ok: #1e8e3e;             /* concluído, link ativo */
  --alerta: #c5221f;         /* expirando, erro */
  --borda: #e3e6ee;

  /* Texto */
  --texto: #1f2329;
  --texto-2: #5f6673;        /* trechos, datas, rótulos */
  --texto-3: #8a909c;

  /* Tipografia */
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tam: 14px;
  --tam-p: 12.5px;
  --tam-g: 22px;

  /* Formas e espaços */
  --raio: 16px;              /* painéis */
  --raio-p: 8px;             /* campos, botões pequenos */
  --raio-pilula: 999px;
  --sombra: 0 1px 2px rgba(20,24,40,.12), 0 2px 6px rgba(20,24,40,.08);
  --sombra-forte: 0 8px 28px rgba(20,24,40,.22);
  --menu-largura: 256px;
  --linha-altura: 48px;      /* altura de cada linha nas listas */
}

/* Modo escuro (segue o sistema; forçar com data-tema="escuro" no <html>) */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --cor: #8f95ff;
    --cor-suave: #2a2e5c;
    --cor-texto-sobre: #0d1030;
    --logo-filtro: brightness(0) invert(1);
    --fundo: #14161c;
    --painel: #1c1f27;
    --linha-hover: #252935;
    --ok: #81c995;
    --alerta: #f28b82;
    --borda: #2c303b;
    --texto: #e6e8ee;
    --texto-2: #a3a9b6;
    --texto-3: #7c8291;
    --sombra: 0 1px 2px rgba(0,0,0,.5);
    --sombra-forte: 0 8px 28px rgba(0,0,0,.6);
  }
}
:root[data-tema="escuro"] {
  --cor: #8f95ff;
  --cor-suave: #2a2e5c;
  --cor-texto-sobre: #0d1030;
  --logo-filtro: brightness(0) invert(1);
  --fundo: #14161c;
  --painel: #1c1f27;
  --linha-hover: #252935;
  --ok: #81c995;
  --alerta: #f28b82;
  --borda: #2c303b;
  --texto: #e6e8ee;
  --texto-2: #a3a9b6;
  --texto-3: #7c8291;
  --sombra: 0 1px 2px rgba(0,0,0,.5);
  --sombra-forte: 0 8px 28px rgba(0,0,0,.6);
}