/* =========================================================================================
   TOKENS: a UNICA fonte de cor.

   Nenhum hex fora deste arquivo. E o que torna o dark mode uma troca de variavel em vez de uma
   reescrita -- e o que impede a decima tela de inventar um cinza que nao existe em lugar nenhum.

   O desenho tem TRES superficies distintas, e elas nao seguem o tema juntas:

     - SIDEBAR : escuro sempre, nos dois temas. E o ancoradouro visual da aplicacao.
     - NAVBAR  : clara no tema claro, escura no escuro. Ela pertence ao conteudo.
     - PAINEL  : o fundo onde os cartoes vivem, um degrau abaixo do branco deles.

   Fixar o sidebar escuro nos dois temas nao e capricho: ele carrega o menu, que precisa ser
   reconhecivel de relance, e uma barra que muda de cor conforme o tema faz o usuario reprocurar
   o mesmo item a cada troca.
   ========================================================================================= */

:root {
  /* --- Superficies do conteudo ------------------------------------------------------- */
  --surface: #ffffff;          /* cartao */
  --surface-2: #f6f8f7;        /* PAINEL: o fundo atras dos cartoes */
  --surface-3: #eef1f0;        /* preenchimento sutil dentro do cartao */

  /* --- Texto: hierarquia por PESO e ESPACO, nao por cor ------------------------------ */
  --text: #0f1613;
  --text-2: #5a6663;
  --text-3: #8a9693;

  /* --- Superficies separadas por borda de 1px ---------------------------------------- */
  --border: #e5eae8;
  --border-strong: #cdd6d2;

  /* --- Marca ------------------------------------------------------------------------- */
  --brand: #0f7a49;
  --brand-hover: #0b6339;
  --brand-soft: #e4f4ec;       /* fundo de destaque discreto */
  --brand-contrast: #ffffff;

  /* Cartao em destaque (o "Hoje" da referencia): verde profundo, com profundidade.
     O degrade e a UNICA excecao a regra de cor chapada, e existe para separar o cartao que
     importa dos demais sem recorrer a tamanho maior. */
  --brand-deep-from: #0a5a37;
  --brand-deep-to: #10794a;

  /* Sobre o verde profundo o texto e as pastilhas precisam de valores proprios: os tokens
     claros desapareceriam ali. "on-" nomeia a cor DE ALGO SOBRE outra superficie. */
  --on-brand-deep: #ffffff;
  --on-brand-deep-2: rgba(255, 255, 255, .78);
  --on-brand-deep-veil: rgba(255, 255, 255, .15);

  /* --- SIDEBAR: escuro nos DOIS temas ------------------------------------------------ */
  --side-bg: #0a100e;
  --side-surface: #161d1a;     /* cartao do usuario, dentro do sidebar */
  --side-border: #1e2724;
  --side-text: #c6cecb;        /* item inativo */
  --side-text-strong: #ffffff; /* item ativo e nome do usuario */
  --side-text-muted: #6c7c78;  /* rotulo de secao */
  --side-hover: #141b19;
  --side-active-bg: var(--brand);
  --side-active-text: #ffffff;

  /* --- NAVBAR ------------------------------------------------------------------------ */
  --nav-bg: #ffffff;
  --nav-border: var(--border);
  --nav-text: var(--text);
  --nav-icon: #6b7975;

  /* --- Estado: a cor diz a NATUREZA do dado, nunca enfeita --------------------------- */
  --ok: #0f9d58;
  --ok-soft: #e4f4ec;
  --warn: #b26a00;
  --warn-soft: #fdf1de;
  --danger: #c62828;
  --danger-soft: #fdeaea;
  --info: #2563eb;
  --info-soft: #e7eeff;

  /* --- Acentos de metrica -----------------------------------------------------------
     Cada indicador tem cor propria e ESTAVEL: quem confere o painel toda manha aprende a
     achar o CTR pelo ambar antes de ler o rotulo. Trocar essas cores entre telas destroi
     esse reconhecimento. */
  --metric-1: #0f9d58;   /* volume / positivo */
  --metric-2: #7c5cff;   /* monetario derivado (eCPM) */
  --metric-3: #0ea5a5;   /* proporcao (PMR) */
  --metric-4: #f59e0b;   /* taxa de interacao (CTR) */
  --metric-5: #2563eb;   /* alcance */

  /* Posicao de ranking: ouro so para o primeiro. Dar ouro a todos e nao dar a ninguem. */
  --rank-gold: #eab308;
  --rank-gold-soft: #fef6dd;
  --rank-gold-border: #f5cf4a;
  --rank-gold-contrast: #3a2c00;   /* texto sobre o ouro: preto nao tem contraste suficiente */
  --rank-neutral: #94a3b8;
  --rank-neutral-soft: #eef1f0;

  --shadow: 0 1px 2px rgba(15, 22, 19, .05), 0 4px 14px rgba(15, 22, 19, .04);
  --shadow-side: 0 0 0 1px rgba(255, 255, 255, .03);

  --radius: 10px;
  --radius-lg: 14px;

  /* Movimento curto o bastante para nao ser notado. */
  --speed: 140ms;
}

[data-bs-theme="dark"] {
  --surface: #131a18;
  --surface-2: #0d1311;
  --surface-3: #1b2320;

  --text: #eaf0ed;
  --text-2: #a3aeaa;
  --text-3: #76827e;

  --border: #232d29;
  --border-strong: #33403b;

  --brand: #16a862;
  --brand-hover: #1cc074;
  --brand-soft: #122b1f;
  --brand-contrast: #06120c;

  --brand-deep-from: #0b4b30;
  --brand-deep-to: #12734a;

  /* O verde profundo continua escuro no tema escuro, entao o que fica SOBRE ele nao muda. */
  --on-brand-deep: #ffffff;
  --on-brand-deep-2: rgba(255, 255, 255, .74);
  --on-brand-deep-veil: rgba(255, 255, 255, .13);

  /* O SIDEBAR quase nao muda: ele ja era escuro. So o contraste da borda sobe um pouco,
     porque agora o conteudo ao lado tambem e escuro e a separacao precisaria sumir. */
  --side-bg: #080d0b;
  --side-surface: #131a18;
  --side-border: #212a27;

  --nav-bg: #131a18;
  --nav-border: var(--border);
  --nav-text: var(--text);
  --nav-icon: #9aa6a2;

  --ok: #3fbd7d;
  --ok-soft: #0f2a1d;
  --warn: #d99a2b;
  --warn-soft: #2b2113;
  --danger: #f07171;
  --danger-soft: #2d1717;
  --info: #6a95ff;
  --info-soft: #16233f;

  --metric-1: #3fbd7d;
  --metric-2: #9d85ff;
  --metric-3: #2cc4c4;
  --metric-4: #fbbf24;
  --metric-5: #6a95ff;

  --rank-gold: #fbbf24;
  --rank-gold-soft: #2a2313;
  --rank-gold-border: #6b571a;
  --rank-gold-contrast: #2a2000;
  --rank-neutral: #94a3b8;
  --rank-neutral-soft: #1b2320;

  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .35);
}

/* prefers-reduced-motion desliga TAMBEM as bibliotecas de animacao por JS -- elas escrevem
   estilo inline, que a media query nao alcanca. Ver app.js. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}