/* Tokens visuais do Reino Manga.
 *
 * Carregado DEPOIS do app.css, entao o que estiver aqui vence. E o unico
 * arquivo de estilo que da para ajustar direto no Gerenciador de Arquivos do
 * cPanel, sem recompilar nada: trocar uma cor ou o arredondamento e so editar
 * e salvar.
 *
 * Os mesmos valores ja vao compilados dentro do app.css, entao apagar este
 * arquivo nao quebra o site - ele volta ao visual padrao.
 *
 * Sao dois blocos: :root vale para o painel (e e o padrao), html.site-publico
 * vale para o site publico. Mude o bloco da tela que quer afetar - mexer no
 * :root nao muda mais o site publico. */

:root {
  color-scheme: dark;

  --bg: #16121a;
  --bg-elevated: #1e1824;
  --bg-panel: #221b29;
  --bg-header: #1e1824;
  --border: rgba(211, 70, 125, 0.28);
  --border-strong: rgba(211, 70, 125, 0.6);
  --text: #f7eef3;
  --text-muted: #b9a9b6;
  --text-faint: #7e6f7d;
  --sakura: #d3467d;
  --sakura-soft: #e98bb0;
  --sakura-hot: #b21f5b;
  --sakura-deep: #7a1440;
  --gold: #d9b98a;
  --gold-soft: rgba(217, 185, 138, 0.18);

  /* Os mesmos rosas em "R G B", para as classes rosa/NN do Tailwind. */
  --sakura-rgb: 211 70 125;
  --sakura-hot-rgb: 178 31 91;

  /* Estilo reto: canto 90 graus em tudo. Mexer aqui arredonda o site inteiro. */
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;

  --shadow-card: 0 10px 30px -14px rgba(0, 0, 0, 0.7);
  --shadow-hover: 0 14px 36px -12px rgba(178, 31, 91, 0.55);
  --shadow-neon: 0 0 18px rgba(211, 70, 125, 0.4);

  /* Lida pelo Ui::container. 80rem e o max-w-7xl do projeto Next. */
  --largura-site: 80rem;
  --fundo-do-site: none;
}

/* Visual do site publico, do mockup de setembro de 2026: preto, tinta
 * vermelha, rosa neon e cantos levemente arredondados.
 *
 * So vale dentro de <html class="site-publico">, que so o layout.php (e o
 * erro.php fora do /admin) poe. O painel carrega este mesmo CSS e fica com os
 * valores do :root acima. html.site-publico em vez de .site-publico pesa mais
 * que :root, entao um :root editado no tema.css nunca desfaz o visual publico.
 * Manter identico ao bloco do tema.css. */

html.site-publico {
  --bg: #07050a;
  --bg-elevated: #0f0b14;
  --bg-panel: #160d1d;
  --bg-header: #0d0711;
  --border: rgba(255, 42, 109, 0.24);
  --border-strong: rgba(255, 42, 109, 0.55);
  --text: #f7f5fa;
  --text-muted: #b9b3c2;
  --text-faint: #8a8296;
  --sakura: #ff2a6d;
  --sakura-soft: #ff7aa2;
  --sakura-hot: #e3165b;
  --sakura-deep: #8c0f3a;
  --gold: #d9b98a;
  --gold-soft: rgba(217, 185, 138, 0.18);
  --sakura-rgb: 255 42 109;
  --sakura-hot-rgb: 227 22 91;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-card: 0 12px 32px -14px rgba(0, 0, 0, 0.85);
  --shadow-hover: 0 14px 36px -12px rgba(255, 42, 109, 0.5);
  --shadow-neon: 0 0 18px rgba(255, 42, 109, 0.45);
  --largura-site: 90.875rem;
  /* Sem foto de fundo: o site publico fica na cor lisa do --bg. Para voltar a
   * usar uma imagem, ponha aqui (e no tema.css) url("/media/decor/arquivo.webp"),
   * sempre com nome de arquivo novo a cada troca: o navegador guarda imagem por
   * 30 dias e o "Resetar cache" do painel so renova CSS e JS. */
  --fundo-do-site: none;
}