/* ---------------------------------------------------------------------------
   tokens.css — a fundação visual do portal.

   REGRA DA CAMADA: **nenhum valor hexadecimal mora fora deste arquivo.**
   `styles.css` e `components.css` só consomem `var(--c-*)`. Um hex solto em
   outro CSS é uma cor que ninguém consegue trocar por tema — foi assim que 17
   hexes anônimos viraram "a bagunça" que esta fatia corrige. O guard que
   sustenta a regra é `test/cssTokens.test.js`.

   Os tokens CONVIVEM com o Bootstrap 5.3 (não o substituem): as variáveis
   `--bs-*` que o Bootstrap lê são derivadas daqui, num único lugar, de modo que
   trocar a marca é editar uma linha.

   Temas: o script anti-FOUC de `index.html` escreve `data-bs-theme` antes da
   primeira pintura — ele continua sendo a fonte que evita o flash. Aceitamos
   também `data-theme` (o nome agnóstico de framework, para quando o Bootstrap
   sair numa fatia futura) e caímos em `prefers-color-scheme` quando NENHUM
   atributo foi escrito.
   --------------------------------------------------------------------------- */

:root {
  /* --- Cor: 11 papéis nomeados ------------------------------------------- */
  /* Marca — um papel, três estados (repouso/hover/pressionado). */
  --c-brand: #4f46e5;
  --c-brand-hover: #4338ca;
  --c-brand-active: #3730a3;
  --c-brand-rgb: 79, 70, 229;
  /* Acento (o fim do gradiente da identidade). Escurecido de #0ea5e9 para
     #0672a8 pelo gate de contraste: o gradiente carrega TEXTO
     (`.section-accent`, `.testchat-bubble.me`) e é usado como tinta em
     `background-clip: text` (`.brand-mark`) — a 2.77:1 o rótulo sumia na ponta
     do gradiente. #0672a8 dá 5.28:1 com o branco. */
  --c-accent: #0672a8;

  /* Estado — cada um com o par `cor` (traço/texto) e `-soft` (preenchimento). */
  --c-ok: #157347;
  --c-ok-soft: #d3f0e0;
  --c-warn: #92610a;
  --c-warn-soft: #fbeecb;
  --c-danger: #b02a37;
  --c-danger-soft: #f8d7da;
  --c-danger-rgb: 176, 42, 55;

  /* Superfície — do fundo da página ao cartão elevado. */
  --c-surface: #ffffff;
  --c-surface-sunken: #f6f7fb;
  --c-surface-raised: #f4f6fa;
  --c-border: #e6e8f0;
  --c-skeleton: #e9ecf2;
  /* A cor da SOMBRA também é do tema: no claro é o azul-carvão da marca; no
     escuro, preto puro (sombra cinza sobre fundo escuro só lava a cor). */
  --c-shadow-rgb: 16, 24, 40;

  /* Texto — três, e só três (fim do `text-muted` ↔ `text-body-secondary`).
     `--c-text-muted` foi escurecido de #64748b para #5b6779 pelo gate de
     contraste: #64748b dava 4.40:1 sobre `--c-surface-raised` e 4.45:1 sobre
     `--c-surface-sunken` — reprovava em AA justamente no badge "inativo" e no
     contador da lista. #5b6779 dá 5.30 / 5.36 / 5.74. */
  --c-text: #1b1f2b;
  --c-text-muted: #5b6779;
  --c-text-on-brand: #ffffff;

  /* --- Tipografia: 5 tamanhos, 3 pesos ----------------------------------- */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.25rem;
  --t-xl: 1.75rem;
  --w-regular: 400;
  --w-medium: 500;
  --w-bold: 700;

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

  /* --- Raio: TRÊS (era 9) ------------------------------------------------- */
  --r-sm: 0.375rem;
  --r-md: 0.625rem;
  --r-lg: 1rem;
  /* `--r-round` não é um degrau da escala: é a FORMA "totalmente arredondada"
     (pílula/círculo), que não tem tamanho intermediário possível. */
  --r-round: 999px;

  /* --- Sombra: duas ------------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(var(--c-shadow-rgb), 0.06);
  --sh-2: 0 1px 2px rgba(var(--c-shadow-rgb), 0.04), 0 4px 16px rgba(var(--c-shadow-rgb), 0.05);

  /* --- Foco: UM token, obrigatório em todo interativo --------------------- */
  --focus-ring: 0 0 0 0.2rem rgba(var(--c-brand-rgb), 0.35);

  /* --- Movimento ---------------------------------------------------------- */
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* --- Ponte para o Bootstrap (derivada, nunca hex) ----------------------- */
  --bs-primary: var(--c-brand);
  --bs-primary-rgb: var(--c-brand-rgb);
  --bs-link-color-rgb: var(--c-brand-rgb);
  --bs-body-bg: var(--c-surface-sunken);
  --bs-border-color: var(--c-border);
  --brand-accent: var(--c-accent);
  --brand-grad: linear-gradient(135deg, var(--c-brand) 0%, var(--c-accent) 100%);
  --skeleton-base: var(--c-skeleton);
  --skeleton-sheen: var(--c-surface-raised);
  --shell-nav-h: 56px;
}

/* --- Tema escuro -----------------------------------------------------------
   Mesmos papéis, outros valores. Nenhum componente conhece um hex escuro. */
:root[data-bs-theme="dark"],
:root[data-theme="dark"] {
  /* No escuro a marca é CLARA — então o hover/active CLAREIAM (escurecer, como
     no tema claro, jogaria o rótulo para 4.29:1 e 3.26:1) e a tinta sobre a
     marca vira ESCURA. `#fff` sobre `#7c74f0` dava 3.74:1 e reprovava em AA;
     `#0f1117` sobre a mesma marca dá 5.04:1 (6.49 / 8.33 no hover/active e
     8.81 sobre o acento do gradiente). */
  --c-brand: #7c74f0;
  --c-brand-hover: #928bf4;
  --c-brand-active: #a9a3f7;
  --c-brand-rgb: 124, 116, 240;
  --c-accent: #38bdf8;

  --c-ok: #75d3a1;
  --c-ok-soft: #14361f;
  --c-warn: #f5c877;
  --c-warn-soft: #3a2c0c;
  --c-danger: #f1949c;
  --c-danger-soft: #3a1418;
  --c-danger-rgb: 241, 148, 156;

  --c-surface: #171a23;
  --c-surface-sunken: #0f1117;
  --c-surface-raised: #252b3a;
  --c-border: #262a38;
  --c-skeleton: #1b1f2b;
  --c-shadow-rgb: 0, 0, 0;

  --c-text: #e6e8f0;
  --c-text-muted: #9aa3b8;
  --c-text-on-brand: #0f1117;

  --focus-ring: 0 0 0 0.2rem rgba(var(--c-brand-rgb), 0.5);
  /* Sobe o texto secundário do Bootstrap ao mesmo papel (AA sobre o escuro). */
  --bs-secondary-color: var(--c-text-muted);
}

/* Sem escolha explícita (nem `data-bs-theme`, nem `data-theme`), segue o SO.
   O anti-FOUC normalmente já escreveu o atributo; isto é a rede de segurança
   para quando o script não roda (JS desativado, snapshot, e-mail print). */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]):not([data-theme]) {
    --c-brand: #7c74f0;
    --c-brand-hover: #928bf4;
    --c-brand-active: #a9a3f7;
    --c-brand-rgb: 124, 116, 240;
    --c-accent: #38bdf8;
    --c-ok: #75d3a1;
    --c-ok-soft: #14361f;
    --c-warn: #f5c877;
    --c-warn-soft: #3a2c0c;
    --c-danger: #f1949c;
    --c-danger-soft: #3a1418;
    --c-danger-rgb: 241, 148, 156;
    --c-surface: #171a23;
    --c-surface-sunken: #0f1117;
    --c-surface-raised: #252b3a;
    --c-border: #262a38;
    --c-skeleton: #1b1f2b;
    --c-shadow-rgb: 0, 0, 0;
    --c-text: #e6e8f0;
    --c-text-muted: #9aa3b8;
    --c-text-on-brand: #0f1117;
    --focus-ring: 0 0 0 0.2rem rgba(var(--c-brand-rgb), 0.5);
    --bs-secondary-color: var(--c-text-muted);
  }
}