/* ---------------------------------------------------------------------------
   WO Design System v1.0 — variante dark. FONTE ÚNICA dos tokens.
   Servido a TODAS as páginas (Activity, aba de captura, loja, moderação e os
   documentos legais). Nada de hex solto fora deste arquivo.

   Existe porque a paleta estava copiada em seis blocos <style> e já tinha
   divergido de três formas silenciosas:
     - nomes diferentes para a mesma coisa (--surface x --bg-surface, --mono x
       --font-mono), o que fazia cada página falar um dialeto;
     - o MESMO nome para coisas diferentes: --muted era #27272A (superfície) em
       comprar.html e #A1A1AA (texto) em admin/termos/privacidade;
     - --radius-lg valia 16px na Activity e 24px na loja.
   E uma divergência que virou defeito: share.html usava var(--shadow-lg) sem
   nunca ter definido o token — a variável não resolvia, a declaração inteira
   era descartada e o painel da aba de captura ficava SEM elevação nenhuma,
   exatamente o que o comentário ao lado dizia ser indispensável.
   O teste tokens-css.test.js cobre essa classe de erro para sempre.
   --------------------------------------------------------------------------- */
:root{
  /* superfícies */
  --bg:#09090B;              /* zinc-950 — fundo da página */
  --bg-surface:#18181B;      /* zinc-900 — cards, containers */
  --bg-muted:#27272A;        /* zinc-800 — hover, campos, áreas secundárias */

  /* texto */
  --fg:#FAFAFA;              /* primário — 19,06:1 sobre --bg */
  --fg-muted:#A1A1AA;        /* zinc-400 — secundário, metadados. 7,76:1 */
  /* zinc-500. 3,67:1 sobre surface: passa em texto GRANDE, falha em texto
     normal. Use só em metadado curto (rótulo, nota de rodapé), nunca em
     parágrafo que a pessoa precise ler. */
  --fg-subtle:#71717A;
  --fg-invert:#09090B;       /* sobre primary */

  /* bordas */
  --border:#27272A;
  --border-strong:#3F3F46;   /* zinc-700 */
  --border-focus:#C60987;

  /* ação */
  --primary:#C60987;         /* magenta da logo Swipy — só como FUNDO */
  /* O magenta da marca sobre fundo escuro rende 3,6:1: passa como fundo (com
     texto branco: 5,3:1) e falha como TEXTO. Este tom claro é o mesmo magenta
     legível a 5,8:1 — use-o sempre que a cor for a do texto. */
  --primary-text:#F040B5;
  --primary-hover:#E520A5;
  --primary-soft:rgba(198,9,135,.15);
  --primary-fg:#FAFAFA;

  /* estado */
  --destructive:#EF4444;     /* 4,71:1 sobre surface */
  --destructive-soft:rgba(239,68,68,.15);
  /* O mesmo par do magenta: o vermelho de estado passa como FUNDO e falha como
     TEXTO pequeno (4,65:1 sobre a faixa translúcida, no fio do mínimo). Este é
     o tom legível — 8,9:1 sobre --bg, 7,9:1 sobre --destructive-soft. Use-o
     sempre que o vermelho for a cor da letra: o selo "MENOR" do painel de
     moderação é o rótulo mais importante do produto inteiro para se ler certo. */
  --destructive-text:#F09595;
  /* Borda mais forte que a divisória: contorno de controle que a pessoa arrasta
     ou clica, onde a linha de 1px do --border some contra a superfície. */
  /* A curva de movimento do produto. Sai rápido e chega devagar: transição que
     desacelera no fim parece resposta, não animação. */
  --ease:cubic-bezier(.2,.8,.2,1);
  --line-strong:#3A3A44;
  /* Aviso. Nasceu com a tela de transmissão, onde o erro deixou de ser um link
     permanente e virou tarja no lugar do controle que falhou. Âmbar e não
     vermelho de propósito: som que não veio é contorno, não falha fatal. */
  --warn:#F2B33D;
  --warn-soft:rgba(242,179,61,.08);
  --warn-line:rgba(242,179,61,.24);
  --success:#22C55E;
  --success-soft:rgba(34,197,94,.15);
  --warning:#FFC176;
  --warning-soft:rgba(255,193,118,.13);
  --warning-fg:#353535;

  /* elevação */
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 12px rgba(0,0,0,.55);
  --shadow-lg:0 12px 32px rgba(0,0,0,.65);
  --shadow-focus:0 0 0 3px rgba(198,9,135,.3);
  /* O painel que flutua sobre a sala (handoff da captura): queda longa, deslocada
     e bem escura. É a mesma do cartão da aba de captura (compartilhar.css), que
     antes a declarava sozinho. */
  --shadow-panel:0 24px 60px -24px rgba(0,0,0,.8);

  /* raio */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px;
  --radius-lg:16px; --radius-xl:24px; --radius-2xl:32px; --radius-pill:9999px;

  /* Pilha do sistema, sem webfont: o CSP do proxy do Discord bloqueia origem
     externa (mesmo motivo dos ícones inline), então declarar Inter/Roboto Mono
     era uma promessa que só se cumpria em quem já tinha a fonte instalada — e
     silenciosamente virava outra tipografia em todo mundo mais. */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* --- tipografia do sistema ---
   Vocabulário do WO DS. Hoje nenhuma página usa estas classes (cada uma estiliza
   h1/h2 na mão); ficam aqui como o lugar único para onde a tipografia converge
   quando alguma delas for retrabalhada. Se continuarem sem uso, apague. */
.wou-h1{font-size:36px;font-weight:700;line-height:1.15}
.wou-h2{font-size:24px;font-weight:700;line-height:1.2}
.wou-h3{font-size:20px;font-weight:600;line-height:1.3}
.wou-lead{font-size:18px;font-weight:400}
.wou-body{font-size:14px;font-weight:400}
.wou-label{font-size:14px;font-weight:500}
.wou-caption{font-size:12px;font-weight:400}
.wou-muted{font-size:14px;font-weight:400;color:var(--fg-muted)}
.wou-mono{font-family:var(--font-mono);font-size:14px;font-weight:400}