/* AffiliateRadar — Theme
   Variáveis de cor, fonte e sombra. Modo claro/escuro.
   Para mudar uma cor: edite aqui — todas as páginas atualizam. */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* Fundos */
  --bg:     #f0f2f5;
  --bg2:    #fff;
  --bg3:    #eaecf2;
  --bg3-dark: #d3d7e3;
  --border: #d8dce8;

  /* Texto — preto para leitura confortável; muted é um carvão escuro, quase
     preto, só um degrau abaixo do texto principal para manter hierarquia */
  --text:   #000;
  --muted:  #363c4d;

  /* Cores de status */
  --green:      #0d9e6e;
  --green-dim:  #d4f5e9;
  --blue:       #1a6fd4;
  --blue-dim:   #dbeafe;
  --amber:      #c47a00;
  --amber-dim:  #fef3c7;
  --red:        #dc2626;
  --red-dim:    #fee2e2;
  --purple:     #7c3aed;
  --purple-dim: #ede9fe;
  /* Botões de ação do detalhe — paleta própria, distinta das cores de status
     (verde/azul/âmbar/vermelho/roxo). Cada botão tem sua cor + tom suave (dim).
     Para trocar a cor de um botão: edite aqui. */
  --act-update:   #6242d6;  --act-update-dim:   #e6e2fb;  /* Atualizar (índigo ~252°) */
  --act-trends:   #dd6a15;  --act-trends-dim:   #fce6d2;  /* Google Trends (laranja ~27°) */
  --act-platform: #2f6ede;  --act-platform-dim: #dde7fb;  /* Ver na Plataforma (azul ~218°) */
  --act-status:   #d63a72;  --act-status-dim:   #fbdde8;  /* Status (rosa-pink ~339°) */
  --act-keywords: #b03bc4;  --act-keywords-dim: #f3ddf8;  /* Keywords (magenta — igual à Página) */
  --act-pagina:   #b03bc4;  --act-pagina-dim:   #f3ddf8;  /* Página (magenta ~291°) */

  /* Texto sobre fundo de cor saturada (botões preenchidos no hover/ativo).
     Claro: branco. Escuro: tinta escura — os acentos ficam claros no dark e
     branco sobre eles falharia o contraste (WCAG). Ver body.dark. */
  --on-accent: #fff;

  /* Sinal de viabilidade (coluna Sinal da tabela). Reaproveita cores já
     usadas no resto do app em vez de criar tons novos — azul/verde/vermelho
     têm equivalente direto; amarelo e cinza ficaram com tom próprio porque
     nada na paleta chegava perto sem colidir com laranja (âmbar) ou sumir
     de contraste (cinzas existentes). */
  --sinal-azul:         var(--blue);
  --sinal-verde:        var(--green);
  --sinal-amarelo:      #eab308;
  --sinal-laranja:      var(--act-trends);
  --sinal-vermelho:     var(--red);
  --sinal-cinza:        #9ca3af;

  /* Tipografia */
  --mono: 'Space Mono', monospace;
  --sans: 'DM Sans', sans-serif;

  /* Escala tipográfica — fonte única para os tamanhos repetidos no app */
  --fs-xs:   9px;   /* labels minúsculos, subs */
  --fs-sm:   10px;  /* badges, uppercase labels */
  --fs-md:   11px;  /* corpo padrão de tabela/botões */
  --fs-base: 12px;  /* tooltips, toast, empty state */
  --fs-lg:   13px;  /* títulos de card/seção */
  --fs-xl:   18px;  /* números de destaque (stats) */

  /* Raios — escala unificada */
  --radius:     10px;  /* cards, wraps grandes */
  --radius-md:  8px;   /* stats, seções, modais, toast */
  --radius-sm:  6px;   /* inputs, botões */
  --radius-xs:  4px;   /* chips, badges, mini-botões */
  --radius-pill: 999px;/* status pills arredondadas */

  /* Sombras */
  --shadow:    0 2px 12px rgba(0,0,0,.07);
  --shadow-sm: 0 1px 6px rgba(0,0,0,.06);  /* header, faixas finas */

  /* Tooltip (ghost overlay invertido — escuro sobre fundo claro) */
  --tip-bg:     #1a1d26;
  --tip-text:   #f0f2f5;
  --tip-border: rgba(255,255,255,.08);

  /* Foco (anel de acessibilidade) */
  --focus-ring: var(--blue-dim);
}

/* ── MODO ESCURO ─────────────────────────────────────────────── */
body.dark {
  --bg:     #0a0c10;
  --bg2:    #111318;
  --bg3:    #181c24;
  --bg3-dark: #0c0e13;
  --border: #1f2430;

  --text:  #f2f4f8;
  --muted: #9aa4b6;

  --green:      #00e5a0;
  --green-dim:  #0a2b20;
  --blue:       #3b9eff;
  --blue-dim:   #0a1e38;
  --amber:      #f5a623;
  --amber-dim:  #2a1d08;
  --red:        #ff4d6d;
  --red-dim:    #2d0a0a;
  --purple:     #a78bfa;
  --purple-dim: #1e1440;
  --act-update:   #8f7cf2;  --act-update-dim:   #191248;
  --act-trends:   #f7923f;  --act-trends-dim:   #2e1808;
  --act-platform: #5f9bff;  --act-platform-dim: #0b1d3e;
  --act-status:   #f56d97;  --act-status-dim:   #320a18;
  --act-keywords: #d072e6;  --act-keywords-dim: #2b0c33;
  --act-pagina:   #d072e6;  --act-pagina-dim:   #2b0c33;

  /* Tinta escura sobre acentos claros — mantém contraste AA no hover/ativo */
  --on-accent: #0a0c10;

  /* Sinal — versões p/ fundo escuro. As variáveis reaproveitadas (azul,
     verde, laranja, vermelho) precisam ser redeclaradas aqui: a substituição
     de var(--x) é resolvida no elemento onde a propriedade é DEFINIDA (o
     :root, em modo claro), não em cada uso — sem redeclarar, o valor
     herdado ficaria travado no tom claro. */
  --sinal-azul:         var(--blue);
  --sinal-verde:        var(--green);
  --sinal-amarelo:      #facc15;
  --sinal-laranja:      var(--act-trends);
  --sinal-vermelho:     var(--red);
  --sinal-cinza:        #5b6472;

  --shadow:    0 2px 16px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 6px rgba(0,0,0,.35);

  /* Tooltip — levemente mais claro que o fundo do app, contraste mantido */
  --tip-bg:     #1f2430;
  --tip-text:   #e8eaf0;
  --tip-border: rgba(255,255,255,.10);
}

/* ── RESET E BASE ────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg3); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }