/**
 * tremeax. — Tokens de tema
 *
 * Único arquivo com valores de cor. site.css só consome var(--*).
 * Dark é o padrão (:root). Light entra via [data-theme="light"] no <html>.
 *
 * Regra do amarelo:
 *  - dark  → pode ser texto de destaque e rótulo (--accent-text, --label-color)
 *  - light → NUNCA texto. Vira fundo de marca-texto (--hl-bg), barra sólida,
 *            preenchimento de botão com texto preto ou detalhe pequeno em
 *            --accent-strong.
 */

:root {
  color-scheme: dark;

  /* Base */
  --bg: #0D0D0D;
  --bg-rgb: 13 13 13;
  --surface: #141413;
  --line: #242422;
  --text: #F5F5F2;
  --muted: #A3A39D;

  /* Marca */
  --accent: #FFC400;
  --accent-ink: #0D0D0D;
  --accent-strong: #FFC400;

  /* Papéis do amarelo (o que muda de tema para tema) */
  --label-color: var(--accent);       /* rótulos de seção em mono */
  --hl-color: var(--accent);          /* trecho de destaque nos títulos */
  --hl-bg: transparent;
  --logo-dot: var(--accent);          /* ponto final do logo */
  --focus-ring: var(--accent);

  /* Barra de navegação */
  --nav-alpha: 0.72;
  --nav-alpha-scrolled: 0.92;
  --nav-cta-bg: var(--accent);
  --nav-cta-ink: var(--accent-ink);

  /* Tipografia dependente de tema */
  --title-lh: 1;

  /* Par fixo (não muda com o tema): botão escuro sobre faixa amarela */
  --ink: #0D0D0D;
  --on-ink: #F5F5F2;

  /* Mídia: capas de projeto e cards de logos de clientes */
  --media-bg: #FFFFFF;

  /* Logos de clientes em tom único e suave. A maioria tem tinta escura: no dark inverte.
     --logo-filter-alt vale para logos de tinta clara (Aride, Young Market). */
  --logo-filter: grayscale(1) invert(1);
  --logo-filter-alt: grayscale(1);
  --logo-opacity: 0.72;

  /* Sombras e véus */
  --shadow: 0 24px 60px rgb(0 0 0 / 0.5);
  --scrim: rgb(0 0 0 / 0.6);

  /* Validação de formulário */
  --danger: #FF8A80;
  --ok: #7DDC9A;
}

[data-theme="light"] {
  color-scheme: light;

  --bg: #FAFAF7;
  --bg-rgb: 250 250 247;
  --surface: #FFFFFF;
  --line: #E4E4DC;
  --text: #0D0D0D;
  --muted: #55554E;

  --accent: #FFC400;
  --accent-ink: #0D0D0D;
  --accent-strong: #E0A800;

  --label-color: var(--text);
  --hl-color: var(--accent-ink);
  --hl-bg: var(--accent);
  --logo-dot: var(--accent-strong);
  --focus-ring: var(--text);

  --nav-alpha: 0.72;
  --nav-alpha-scrolled: 0.94;
  --nav-cta-bg: var(--text);
  --nav-cta-ink: var(--bg);

  --title-lh: 1.04;

  --logo-filter: grayscale(1);
  --logo-filter-alt: grayscale(1) brightness(0);

  --shadow: 0 24px 60px rgb(13 13 13 / 0.12);
  --scrim: rgb(13 13 13 / 0.4);

  --danger: #B3261E;
  --ok: #1B6B3A;
}