/* =========================================================================
   ORLOGOS — Design Tokens unificados (MÓDULO 1)
   -------------------------------------------------------------------------
   Fonte única de verdade para cores, tipografia, espaçamento, raios,
   sombras e transições, em tema escuro (padrão) e claro.

   Uso:
     - broadcast.html  → <link> antes do <style> inline (o inline pode
       sobrescrever pontualmente; estes tokens servem de base/fallback).
     - static/css/signup.css → consome estes tokens (removeu o :root próprio).
     - templates/conversas.html → <link> no <head>.

   Convenção de nomes canônicos + aliases retrocompatíveis:
     Canônicos : --bg --card --surface --surface2 --text --muted --accent
                 --gold --gold-promo --danger --border --on-accent --on-gold
                 --info --shadow-color --wa-*
     Aliases   : --primary --primary-hover --primary-text --border-color
                 --input-bg --err --ok --shadow --radius  (usados pelo signup)
   Não remova os aliases: há CSS legado que depende deles.
   ========================================================================= */

/* ---- Tema ESCURO (padrão) ---- */
:root,
[data-theme="dark"] {
  /* Cores base */
  --bg:#0B1512;
  --card:#111e17;
  --surface:#111e17;
  --surface2:#162219;
  --text:#ffffff;
  --muted:#8a9e93;

  /* Marca */
  --accent:#3EE870;
  --gold:#3EE870;
  --gold-promo:#c9a227;
  /* Cor de link em texto corrido. No escuro é igual a --accent (11.5:1 de
     contraste, sobra). No claro NÃO pode ser --accent puro: #1E9E52 sobre
     branco só chega a 3.46:1, abaixo do mínimo de 4.5:1 do WCAG AA para
     texto — por isso o claro ganha um tom mais escuro só para esse uso. */
  --link:var(--accent);
  --focus-ring:var(--accent);

  /* Semânticas */
  --danger:#FF5A5A;
  --info:#8FA6EE;
  --border:rgba(62,232,112,0.10);
  --shadow-color:rgba(0,0,0,0.45);

  /* Texto sobre superfícies coloridas (fixo nos dois temas) */
  --on-gold:#0B1512;
  --on-accent:#0B1512;

  /* Pré-visualização do WhatsApp (cores fixas do app) */
  --wa-bubble:#DCF8C6; --wa-ink:#111111; --wa-foot:#667781;
  --wa-var-ink:#7a5d18; --wa-btn-bg:#ffffff; --wa-link:#00a5f4;
  --wa-media:#111111; --wa-media-ink:#ffffff; --wa-tick:#53bdeb;

  /* Skeleton loading */
  --sk-base:#162219;
  --sk-highlight:#22392b;

  /* ---- Aliases retrocompatíveis (signup) ---- */
  --primary:var(--accent);
  --primary-hover:#52f080;
  --primary-text:#0B1512;
  --border-color:var(--border);
  --input-bg:#162219;
  --err:var(--danger);
  --ok:var(--accent);
  --shadow:0 10px 40px -18px rgba(0,0,0,.6);
  --radius:14px;

  /* Tipografia */
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-lg:16px;
  --fs-xl:20px; --fs-2xl:28px;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
  --lh-tight:1.2; --lh-normal:1.5; --lh-relaxed:1.6;

  /* Espaçamento (escala de 4px) */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;

  /* Raios */
  --radius-sm:9px; --radius-md:12px; --radius-lg:16px; --radius-full:9999px;
  /* aliases legados de raio (broadcast) */
  --r:14px; --r-sm:9px;

  /* Sombras */
  --shadow-sm:0 1px 3px var(--shadow-color);
  --shadow-md:0 6px 18px var(--shadow-color);
  --shadow-lg:0 14px 40px var(--shadow-color);

  /* Transições */
  --transition-fast:120ms ease;
  --transition:200ms ease;
}

/* ---- Tema CLARO ---- */
[data-theme="light"] {
  --bg:#F4F7F5;
  --card:#ffffff;
  --surface:#eef3ef;
  --surface2:#ffffff;
  --text:#0B1512;
  --muted:#5a6b60;

  --accent:#1E9E52;
  --gold:#1E9E52;
  --gold-promo:#B4882F;
  /* #198645 = --accent escurecido ~15%: 4.63:1 sobre branco (AA), continua
     lendo como "o verde da marca". Ver nota no tema escuro acima. */
  --link:#198645;
  --focus-ring:#1E9E52;

  --danger:#E53E3E;
  --info:#3f56c4;
  --border:rgba(0,0,0,0.09);
  --shadow-color:rgba(0,0,0,0.12);

  --on-gold:#ffffff;
  --on-accent:#ffffff;

  --wa-bubble:#DCF8C6; --wa-ink:#111111; --wa-foot:#667781;
  --wa-var-ink:#7a5d18; --wa-btn-bg:#ffffff; --wa-link:#00a5f4;
  --wa-media:#111111; --wa-media-ink:#ffffff; --wa-tick:#53bdeb;

  --sk-base:#e6ece8;
  --sk-highlight:#f3f7f4;

  /* Aliases (signup) — tema claro */
  --primary:var(--accent);
  --primary-hover:#178a46;
  --primary-text:#ffffff;
  --border-color:#E1E7E3;
  --input-bg:#ffffff;
  --err:var(--danger);
  --ok:var(--accent);
  --shadow:0 10px 40px -20px rgba(17,17,17,.20);
  --radius:12px;
}

/* ---- Fallback por preferência do SO quando não há data-theme explícito ----
   (as páginas normalmente aplicam data-theme antes da pintura; isto evita
   um flash incorreto caso o atributo ainda não esteja presente). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:#F4F7F5; --card:#ffffff; --surface:#eef3ef; --surface2:#ffffff;
    --text:#0B1512; --muted:#5a6b60;
    --accent:#1E9E52; --gold:#1E9E52; --gold-promo:#B4882F;
    --link:#198645; --focus-ring:#1E9E52;
    --danger:#E53E3E; --info:#3f56c4;
    --border:rgba(0,0,0,0.09); --shadow-color:rgba(0,0,0,0.12);
    --on-gold:#ffffff; --on-accent:#ffffff;
    --sk-base:#e6ece8; --sk-highlight:#f3f7f4;
    --primary-hover:#178a46; --primary-text:#ffffff;
    --border-color:#E1E7E3; --input-bg:#ffffff;
    --shadow:0 10px 40px -20px rgba(17,17,17,.20); --radius:12px;
  }
}

/* =========================================================================
   Links & foco — base global (MÓDULO 1)
   -------------------------------------------------------------------------
   Rede de segurança: qualquer <a> sem classe própria herda daqui, em vez de
   cair na cor padrão do navegador (azul/roxo) — que não respeita tema
   nenhum. Regras com classe (.nav-item, .msg-link, .cg-tab, etc.) têm
   especificidade maior e continuam controlando seus próprios casos; nada
   aqui as sobrescreve.

   a:visited precisa de regra própria: o roxo padrão do navegador para link
   já visitado tem prioridade sobre "a{color:...}" sozinho (pseudo-classe >
   elemento) — sem isso, o link volta a ficar roxo assim que alguém clica
   nele uma vez, mesmo com a regra base acima no lugar.

   :focus-visible (não :focus) para não desenhar anel em cliques de mouse/
   toque — só aparece para navegação por teclado, que é exatamente quando
   é necessário. Cobre qualquer elemento focável que hoje não define o
   próprio estado de foco (links soltos, botões de ícone como o hamburger),
   sem interferir em elementos que já têm um indicador próprio (inputs com
   troca de --border-color, por exemplo continuam como estão).
   ========================================================================= */
a {
  color: var(--link);
  text-decoration-color: currentColor;
  text-underline-offset: 2px;
}
a:visited { color: var(--link); }
a:hover { opacity: .82; }
a:active { opacity: .68; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================================
   Skeleton loading (shimmer que respeita o tema)
   ========================================================================= */
@keyframes skeleton-shimmer {
  0%   { background-position:-200% 0; }
  100% { background-position:200% 0; }
}
.sk-line, .sk-avatar, .sk-card, .sk-btn {
  background:linear-gradient(90deg,
     var(--sk-base) 25%, var(--sk-highlight) 37%, var(--sk-base) 63%);
  background-size:200% 100%;
  animation:skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius:var(--radius-sm);
}
.sk-line   { height:12px; width:100%; margin:6px 0; }
.sk-line.sk-sm  { width:40%; }
.sk-line.sk-md  { width:65%; }
.sk-line.sk-lg  { width:85%; }
.sk-avatar { width:44px; height:44px; border-radius:var(--radius-full); flex:none; }
.sk-card   { height:72px; width:100%; border-radius:var(--radius-md); }
.sk-btn    { height:40px; width:120px; border-radius:var(--radius-full); }
@media (prefers-reduced-motion: reduce) {
  .sk-line, .sk-avatar, .sk-card, .sk-btn { animation:none; }
}

/* =========================================================================
   Empty states (estado vazio reutilizável)
   ========================================================================= */
.empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:var(--space-10) var(--space-6);
  gap:var(--space-2); color:var(--muted); min-height:180px;
}
.empty-state-icon {
  font-size:40px; line-height:1; margin-bottom:var(--space-2);
  opacity:.85; color:var(--accent);
}
.empty-state-title {
  font-size:var(--fs-lg); font-weight:var(--fw-semibold); color:var(--text);
}
.empty-state-sub {
  font-size:var(--fs-sm); color:var(--muted); line-height:var(--lh-relaxed);
  max-width:36ch;
}
