/* ============================================================
   Sites Station — Design Tokens (FONTE ÚNICA)
   Carregue este arquivo ANTES de qualquer CSS de tema
   (landing.css, admin.css, super-admin.css, blog.css…).
   Nenhum outro arquivo deve declarar :root — todos os valores
   de cor, espaço, raio, sombra e tipografia vivem aqui.

   Fontes: carregue ../shared/css/fontes.css (as fontes são servidas do
   nosso servidor, e não do Google, desde a spec 164).
============================================================ */
:root{
  /* superfícies escuras (navegação / sala escura) */
  --ink:#161629;
  --ink-2:#1f2040;
  --ink-3:#2b2c52;
  --ink-line:#33345e;

  /* superfícies claras (conteúdo) */
  --canvas:#eef0f7;
  --canvas-2:#e6e9f3;
  --surface:#ffffff;
  --surface-2:#f7f8fc;

  /* marca */
  --primary:#4c4ddc;        /* violeta elétrico — ação primária */
  --primary-600:#3d3ec4;
  /* texto sobre o violeta claro (`--primary-soft`). No escuro o fundo fica
     escuro e o `--primary-600` some nele — e ele não pode ser trocado, porque
     também é o hover do botão primário. Por isso um token só para o texto. */
  --primary-on-soft:#3d3ec4;
  --primary-soft:#eceaff;
  --primary-line:#d6d4fb;

  --signal:#f5a524;         /* âmbar — assinatura, estados "ao vivo" */
  --signal-soft:#fdf0d5;
  --signal-deep:#b9771a;

  /* semânticas */
  --success:#17b26a; --success-soft:#dcf5e9;
  /* o verde como TEXTO sobre fundo claro: o --success dá 2,8:1 no branco, e o
     mínimo para texto é 4,5:1 (Lighthouse, parte 7 do plano de testes) */
  --success-ink:#0d7a47;
  --danger-ink:#c73a3f;     /* o --danger dá 3,9:1 no branco */
  --signal-ink:#a35a00;     /* o --signal (âmbar) dá 2,0:1 no branco */
  --danger:#e5484d;  --danger-soft:#fbe3e4;
  --warn:#f79009;    --warn-soft:#fdeccf;
  --info:#2e90fa;    --info-soft:#dceafe;

  /* texto e linhas */
  --text:#1b1c2e;
  --text-2:#4a4c63;
  /* ⚠️ era #787b95: 4,1:1 no branco, abaixo dos 4,5:1 que texto pequeno pede
     (Lighthouse, parte 7 do plano de testes). Este dá 5,2:1 no branco e passa
     também nos fundos cinza claros dos cartões */
  --muted:#686b83;
  --faint:#a6a8bd;
  --border:#e2e4ef;
  --border-2:#d4d7e6;

  /* fundo de campo de formulário.
     ⚠️ Existe porque no claro o controle é `--surface` e no escuro `--surface-2`,
     e essa diferença virava uma regra `:root[data-theme="dark"] .inp{...}` para
     cada componente novo — uma lista que alguém tinha de lembrar de aumentar.
     Quem esquecia criava o próximo defeito: foi assim que a textarea de resposta
     do suporte ficou branca no tema escuro (spec 061). */
  --field:#ffffff;
  --field-line:var(--border-2);
  /* o campo que existe para ser lido, e não preenchido (spec 100).
     ⚠️ Token, e não um `#f4f5fb` escrito dentro da regra: é exatamente o erro
     que o comentário acima descreve, o que deixou a textarea do suporte branca
     no tema escuro. */
  --field-2:#f4f5fb;

  /* o hover do lilás suave.
     ⚠️ Não existia, e por isso foi escrito à mão como `#e4e1ff` — um claro fixo
     que, no tema escuro, trocava o fundo escuro da notificação não lida por um
     lilás claro e sumia com o texto (spec 061). */
  --primary-soft-2:#e4e1ff;

  /* ---- barra lateral (o "rail") ----
     ⚠️ Ela usava `--ink`, que é a superfície ESCURA por definição — logo era
     escura nos dois temas, de propósito. O cliente pediu que acompanhasse o
     tema, e agora acompanha (spec 061).
     Voltar ao rail escuro sempre é trocar estes valores aqui, sem tocar em
     componente nenhum. O painel do operador faz exatamente isso: ele fixa o
     rail escuro no próprio CSS, porque lá a sala escura é intencional. */
  --rail:#ffffff;
  --rail-2:#eef0f7;
  --rail-3:#e6e9f3;
  --rail-line:#e2e4ef;
  --rail-text:#1b1c2e;
  --rail-text-2:#4a4c63;
  --rail-muted:#787b95;
  --rail-ic-active:#4c4ddc;
  /* o âmbar da marca DENTRO do rail.
     ⚠️ `--signal` puro (#f5a524) sobre branco dá contraste de ~2:1: o "WP" da
     marca ficava quase apagado quando o rail passou a ser claro. `--signal-deep`
     existe exatamente para âmbar sobre fundo claro (spec 063). */
  --rail-accent:#b9771a;
  /* o "Station" do nome da marca: violeta no claro, lilás no escuro, como no logo */
  --marca-acento:#4c4ddc;
  --rail-active:linear-gradient(90deg,rgba(76,77,220,.16),rgba(76,77,220,.05));
  --rail-hover:rgba(22,22,41,.05);

  /* raios */
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:20px;

  /* sombras */
  --shadow-sm:0 1px 2px rgba(22,22,41,.06),0 1px 3px rgba(22,22,41,.05);
  --shadow:0 4px 14px rgba(22,22,41,.08),0 2px 6px rgba(22,22,41,.05);
  --shadow-lg:0 18px 50px rgba(22,22,41,.18),0 6px 18px rgba(22,22,41,.10);
  --shadow-pop:0 10px 34px rgba(22,22,41,.16);

  /* tipografia */
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --display:'Space Grotesk',var(--sans);
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* escala de tamanho de fonte (mantém os valores atuais p/ adoção
     sem mudança visual — usar em vez de px soltos a partir da Fase 2) */
  --fs-xs:11.5px;
  --fs-sm:12.5px;
  --fs-base:13.5px;
  --fs-md:14px;
  --fs-lg:15px;

  /* escala de espaçamento (padrão base 4px) */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;

  /* alturas de controle padronizadas */
  --ctrl-h:42px;            /* inputs / selects */
  --btn-h:40px;             /* botão padrão */
  --btn-h-sm:33px;          /* botão pequeno */
  --icon-h:38px;            /* icon-button / busca do topo */

  /* layout / movimento */
  --sidebar-w:248px;
  /* ⚠️ A altura da barra do topo, que é `sticky` (spec 086). Vive aqui
     porque quem gruda **abaixo** dela precisa da mesma medida: a barra do
     editor de post é a primeira. Dois números iguais escritos em arquivos
     diferentes divergem no dia em que um deles mudar. */
  --topbar-h:62px;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

/* ============================================================
   MODO ESCURO — sobrescreve apenas os tokens.
   (as regras de componente do dark ficam no CSS de cada tema
    até a Fase 2 consolidar tudo em base.css)
============================================================ */
:root[data-theme="dark"]{
  --ink:#0e0e1a; --ink-2:#171733; --ink-3:#222244; --ink-line:#2c2c52;
  --canvas:#0e0e1a; --canvas-2:#16162b;
  --surface:#191a2e; --surface-2:#20223a;
  --primary-soft:#23234d; --primary-line:#34366a; --primary-on-soft:#b9b6ff;
  --signal-soft:#3a2c12; --signal-deep:#f0b860;
  --success-soft:#10301f; --danger-soft:#3a1a1c; --warn-soft:#3a2a10; --info-soft:#12273f;
  /* no escuro as cores de sempre já têm contraste */
  --success-ink:#17b26a; --danger-ink:#e5484d; --signal-ink:#f5a524;
  --text:#e9eaf4; --text-2:#bcbed3; --muted:#8d8fa8; --faint:#62647d;
  --border:#2a2c45; --border-2:#34374f;
  --field:#20223a; --field-line:#34374f; --field-2:#191a2e;
  --primary-soft-2:#2e2f63;
  /* o rail escuro é o de sempre — estes são os valores que já valiam */
  --rail:#0e0e1a; --rail-2:#171733; --rail-3:#222244; --rail-line:#2c2c52;
  --rail-text:#ffffff; --rail-text-2:#b1b3d4; --rail-muted:#7e80a8;
  --rail-ic-active:#b9b9ff; --rail-accent:#f5a524; --marca-acento:#b9b6ff;
  --rail-active:linear-gradient(90deg,rgba(76,77,220,.28),rgba(76,77,220,.12));
  --rail-hover:rgba(255,255,255,.06);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 4px 14px rgba(0,0,0,.45);
  --shadow-lg:0 18px 50px rgba(0,0,0,.6); --shadow-pop:0 10px 34px rgba(0,0,0,.5);
}