/*
 * tokens.css — única fonte de valores visuais do app (cor, tipo, espaço, raio, sombra, camada, duração).
 * Nenhum outro CSS usa valor cru de cor/tamanho: tudo passa por aqui, então trocar a identidade
 * visual do SocialFlow é mexer só neste arquivo (ver README, "Trocar a identidade visual").
 * Modo escuro: segue prefers-color-scheme, a menos que o usuário force com [data-theme] na <html>.
 * O bloco escuro aparece duas vezes de propósito: CSS não deixa reaproveitar um bloco entre
 * @media e seletor de atributo.
 * Contraste (29/10/2026): no escuro, texto de apoio e destaque ficam em 7:1 ou mais (AAA) sobre as
 * superfícies; no claro, nada abaixo de 4,5:1. Ao mexer numa cor, confira os pares de novo.
 */
:root {
  color-scheme: light;

  /* Superfícies e texto — claro */
  --cor-fundo: #f4f5f9;
  --cor-superficie: #ffffff;
  --cor-superficie-2: #eef0f6;
  --cor-borda: #e1e4ee;
  --cor-borda-forte: #c7cce0;
  --cor-texto: #151b33;
  --cor-texto-suave: #4f5673;
  --cor-texto-fraco: #5c637f;

  /* Destaque (violeta) */
  --cor-destaque: #6d3fe0;
  --cor-destaque-hover: #5a2fc4;
  --cor-destaque-ativo: #4b25a8;
  --cor-destaque-suave: #efe9ff;
  --cor-sobre-destaque: #ffffff;

  /* Estados */
  --cor-erro: #c42b3b;
  --cor-erro-suave: #fdebed;
  --cor-ok: #17794a;
  --cor-ok-suave: #e3f6ec;
  --cor-aviso: #8a5a00;
  --cor-aviso-suave: #fff3d6;

  --cor-foco: #6d3fe0;
  --cor-veu: rgba(14, 17, 32, 0.5);

  /* Rodapé da página inicial: faixa escura nos dois temas (no escuro, um tom acima do fundo da página).
     Texto de apoio sobre ela com 8:1 ou mais; a assinatura "B20 Conteúdo Digital" usa os dois tons de destaque. */
  --cor-rodape: #121831;
  --cor-sobre-rodape: #eef0fa;
  --cor-sobre-rodape-suave: #b3b9d4;
  --cor-rodape-destaque: #b8a1ff;
  --cor-rodape-destaque-2: #ff9fcf;
  --cor-rodape-vidro: rgba(255, 255, 255, 0.06);
  --cor-rodape-linha: rgba(255, 255, 255, 0.12);

  /* Sobre imagem (selos e setas da prévia do feed): iguais nos dois temas, a imagem não muda de tema */
  --cor-midia-veu: rgba(11, 16, 32, 0.62);
  --cor-sobre-midia: #ffffff;
  --cor-tela-video: #0b1020; /* fundo do quadro de tela cheia na prévia (TikTok, Kwai) */

  /* Tipografia */
  --fonte-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace;
  --tam-xs: 0.75rem;
  --tam-sm: 0.875rem;
  --tam-md: 1rem;
  --tam-lg: 1.125rem;
  --tam-xl: 1.375rem;
  --tam-2xl: 1.75rem;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 650;
  --entrelinha: 1.5;
  --entrelinha-curta: 1.25;

  /* Espaçamento (escala de 4px) */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;

  /* Raio */
  --raio-sm: 6px;
  --raio-md: 10px;
  --raio-lg: 16px;
  --raio-total: 999px;

  /* Sombra */
  --sombra-sm: 0 1px 2px rgba(21, 27, 51, 0.06);
  --sombra-md: 0 4px 14px rgba(21, 27, 51, 0.08);
  --sombra-lg: 0 18px 48px rgba(21, 27, 51, 0.18);

  /* Camadas */
  --z-topbar: 20;
  --z-sidebar: 40;
  --z-veu: 30;
  --z-modal: 60;
  --z-toast: 80;

  /* Movimento */
  --dur-rapida: 120ms;
  --dur-media: 220ms;
  --dur-lenta: 360ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Layout */
  --largura-sidebar: 15rem;
  --altura-topbar: 3.5rem;
  --largura-conteudo: 96rem;
}

/* No computador a barra do topo não aparece (screens.css): nada fica grudado abaixo dela. */
@media (min-width: 62rem) {
  :root { --altura-topbar: 0rem; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cor-rodape: #121731;
    color-scheme: dark;
    --cor-fundo: #0b0e1a;
    --cor-superficie: #151a2c;
    --cor-superficie-2: #1c2238;
    --cor-borda: #2e3556;
    --cor-borda-forte: #4a5383;
    --cor-texto: #f2f4fb;
    --cor-texto-suave: #c4c9df;
    --cor-texto-fraco: #abb2cd;
    --cor-destaque: #b8a1ff;
    --cor-destaque-hover: #c8b6ff;
    --cor-destaque-ativo: #d6c8ff;
    --cor-destaque-suave: #261f4d;
    --cor-sobre-destaque: #0b0e1a;
    --cor-erro: #ff9aa5;
    --cor-erro-suave: #3a1a22;
    --cor-ok: #7ee0b0;
    --cor-ok-suave: #12301f;
    --cor-aviso: #f5cd72;
    --cor-aviso-suave: #33280c;
    --cor-foco: #c8b6ff;
    --cor-veu: rgba(0, 0, 0, 0.62);
    --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-md: 0 4px 14px rgba(0, 0, 0, 0.45);
    --sombra-lg: 0 18px 48px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --cor-rodape: #121731;
  color-scheme: dark;
  --cor-fundo: #0b0e1a;
  --cor-superficie: #151a2c;
  --cor-superficie-2: #1c2238;
  --cor-borda: #2e3556;
  --cor-borda-forte: #4a5383;
  --cor-texto: #f2f4fb;
  --cor-texto-suave: #c4c9df;
  --cor-texto-fraco: #abb2cd;
  --cor-destaque: #b8a1ff;
  --cor-destaque-hover: #c8b6ff;
  --cor-destaque-ativo: #d6c8ff;
  --cor-destaque-suave: #261f4d;
  --cor-sobre-destaque: #0b0e1a;
  --cor-erro: #ff9aa5;
  --cor-erro-suave: #3a1a22;
  --cor-ok: #7ee0b0;
  --cor-ok-suave: #12301f;
  --cor-aviso: #f5cd72;
  --cor-aviso-suave: #33280c;
  --cor-foco: #c8b6ff;
  --cor-veu: rgba(0, 0, 0, 0.62);
  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  --sombra-lg: 0 18px 48px rgba(0, 0, 0, 0.6);
}