/* ===========================================================================
   lib/theme.css — identidade visual da biblioteca de aparelhos
   ---------------------------------------------------------------------------
   Paleta única de todas as telas: index, login, register, confirm, delete,
   edit, editor, fcdl-help e test_email.

   Até esta versão cada arquivo repetia o próprio bloco :root, o que fez a
   paleta divergir em alguns pontos (o verde da marca faltava em 4 telas, e
   havia dois tons de "ok", dois de "warn" e três raios de borda). Agora existe
   um lugar só: para mudar a identidade, mexa aqui.

   Ao trocar as cores, atenção a dois conjuntos que NÃO fazem parte do tema:

     - editor/core/vitalicImage.js — as 24 cores da paleta de imagens do
       arquivo .fixture. É formato de dados, não aparência.
     - a tabela de 32 cores do wizard (seção 9 da especificação do FCDL).

   ---------------------------------------------------------------------------
   ORIGEM DAS CORES

   A paleta de fundos e da familia AZUL PETROLEO (matiz ~205 graus). Foi uma
   escolha deliberada, feita depois de comparar com a alternativa verde.

   Contexto, para quem for mexer nisso no futuro:

     - o site da Lumikit e a Universidade usam fundos VERDES (#111a14, matiz
       140 graus). Chegamos a aplicar essa familia aqui, e a avaliacao foi que
       o azul petroleo ficou melhor para a biblioteca;
     - o VERDE DA MARCA (--info #33ff00) e o mesmo dos outros projetos, e e ele
       que faz a ligacao visual entre eles;
     - o site tem uma secao chamada "tema escuro (biblioteca de aparelhos)"
       (--lk-esc-*). Ela NAO e referencia de identidade: e um retrato desta
       paleta azul, copiada para la. Usar aquilo como alvo e circular.

   Contrastes desta paleta (minimo 4,5:1 para texto):

     texto sobre fundo      12,2:1
     texto secundario        5,2:1
     verde da marca         11,1:1
     aviso                   6,2:1
     erro                    3,8:1   <- abaixo do minimo; ver nota
     
   NOTA sobre o erro: #d9534f sobre o fundo rende 3,8:1, abaixo dos 4,5:1
   recomendados para texto. Se um dia isso incomodar, #e05050 sobe para 4,4:1
   mantendo o mesmo tom.
   =========================================================================== */

:root{

  /* ── Marca ──────────────────────────────────────────────────────────────
     --acc  : acento neutro da interface (foco, botões, aba ativa, seleção)
     --info : verde Lumikit — cor de marca (checkboxes, títulos de seção,
              blocos de código FCDL, bordas de item ativo)                  */
  --acc:#ffffff;
  --acc-d:#cccccc;
  --info:#33ff00;

  /* ── Fundos e superfícies ───────────────────────────────────────────── */
  --bg:#1B282E;      /* fundo da página                    */
  --bg2:#141e23;     /* fundo recuado (campos, bloco de código)  */
  --bg3:#223039;     /* superficie ELEVADA, acima do cartao: painel em
                        destaque, cartao sob o cursor. Nao usar como fundo
                        de pagina — a area de trabalho e --bg.         */
  --card:#1e2d34;    /* cartões e painéis                  */
  --border:#2b3e48;  /* bordas e separadores               */

  /* ── Texto ──────────────────────────────────────────────────────────── */
  --txt:#d8eaec;     /* texto normal                       */
  --txt-m:#7a9ea6;   /* texto secundário / rótulos         */

  /* ── Estados ────────────────────────────────────────────────────────── */
  --ok:#4caf86;          /* = --lk-esc-selo do site   */
  --tag:#1d2f18;         /* fundo de selo  = o da Universidade  */
  --tag-line:#2d4d1c;    /* borda do selo  = o da Universidade  */
  --err:#d9534f;
  --warn:#e0973a;

  /* ── Componentes de cor em RGB ──────────────────────────────────────────
     Para usar em rgba(): `rgba(var(--ok-rgb), .15)`. Existem porque várias
     telas tinham esses valores escritos à mão dentro de rgba(), e por isso
     não acompanhavam a variável correspondente.                           */
  --acc-rgb:255,255,255;
  --info-rgb:51,255,0;
  --ok-rgb:76,175,134;
  --err-rgb:217,83,79;
  --warn-rgb:224,151,58;
  --border-rgb:43,62,72;
  --black-rgb:0,0,0;
  --hover-rgb:122,158,166;   /* = --txt-m, para realce de linha */

  /* ── Brilhos (derivados) ────────────────────────────────────────────── */
  --acc-glow:rgba(var(--acc-rgb),.08);
  --info-glow:rgba(var(--info-rgb),.13);

  /* ── Medidas ────────────────────────────────────────────────────────── */
  /* Cantos arredondados, em tres degraus. Os outros projetos da Lumikit usam
     cantos retos; aqui a escolha foi manter o arredondado.
     Para deixar tudo reto, basta zerar os tres.                          */
  --radius-sm:6px;     /* campos, selos, blocos pequenos   (era 2..6px) */
  --radius:9px;        /* cartoes, botoes, caixas          (era 8..10px) */
  --radius-lg:14px;     /* janelas modais                   (era 14..20px) */
  --sidebar:210px;
  --shadow:0 4px 20px rgba(var(--black-rgb),.4);
}