/*
  TOKENS: as "variáveis" de todo projeto.

  Cada projeto troca SÓ o bloco "IDENTIDADE" no próprio estilo.css
  (cores e fontes). Espaços, tamanhos, raios e sombras ficam iguais em
  todos os projetos: é isso que deixa tudo bem acabado e consistente.
*/

:root {
  /* ===== IDENTIDADE (trocar por projeto) ===== */
  --cor-fundo: #f6f5f1;
  --cor-superficie: #ffffff;
  --cor-superficie-2: #efede7;
  --cor-texto: #1b1a17;
  --cor-texto-suave: #5d5a53;
  --cor-borda: #dedad1;
  --cor-marca: #2f5d50;          /* botões, links, destaque principal */
  --cor-marca-forte: #234a3f;    /* hover do botão */
  --cor-sobre-marca: #ffffff;    /* texto em cima da cor de marca */
  --cor-destaque: #c8643b;       /* detalhe pontual, usar pouco */

  --fonte-titulo: "Bricolage Grotesque", system-ui, sans-serif;
  --fonte-texto: "Figtree", system-ui, sans-serif;
  --fonte-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  /* ===== ESTADOS (raramente mudam) ===== */
  --cor-sucesso: #2e7d4f;
  --cor-sucesso-fundo: #e3f2e8;
  --cor-alerta: #9a6212;
  --cor-alerta-fundo: #fbf0d9;
  --cor-erro: #b3261e;
  --cor-erro-fundo: #fbe4e2;
  --cor-foco: #2563eb;

  /* ===== ESPAÇOS (base 4px) ===== */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-9: 96px;
  --e-10: 128px;

  /* ===== TIPOGRAFIA (cresce com a tela) ===== */
  --t-pequeno: 0.875rem;                          /* 14px */
  --t-corpo: 1rem;                                /* 16px */
  --t-grande: 1.125rem;                           /* 18px */
  --t-h4: 1.25rem;
  --t-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --t-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --t-h1: clamp(2.25rem, 1.6rem + 3vw, 4.25rem);
  --altura-linha: 1.6;
  --altura-linha-titulo: 1.1;

  /* ===== FORMA ===== */
  --raio-p: 6px;
  --raio-m: 10px;
  --raio-g: 18px;
  --raio-total: 999px;
  --sombra-1: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.04);
  --sombra-2: 0 4px 12px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.06);
  --sombra-3: 0 16px 40px rgb(0 0 0 / 0.12);

  /* ===== LAYOUT ===== */
  --largura-max: 1180px;
  --largura-texto: 65ch;
  --margem-lateral: clamp(16px, 4vw, 40px);
  --toque-min: 44px;

  /* ===== MOVIMENTO ===== */
  --duracao: 180ms;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Tema escuro: usado principalmente nos sistemas. Ativar com <html data-tema="escuro"> */
[data-tema="escuro"] {
  --cor-fundo: #121413;
  --cor-superficie: #1b1e1d;
  --cor-superficie-2: #242827;
  --cor-texto: #ecebe7;
  --cor-texto-suave: #a3a49f;
  --cor-borda: #313533;
  --cor-marca: #5fb39b;
  --cor-marca-forte: #7cc6b0;
  --cor-sobre-marca: #0d1513;
  --cor-sucesso-fundo: #16301f;
  --cor-alerta-fundo: #33270f;
  --cor-erro-fundo: #3a1714;
  --cor-sucesso: #6fcf97;
  --cor-alerta: #e8b45a;
  --cor-erro: #f2817a;
  --sombra-2: 0 4px 12px rgb(0 0 0 / 0.4);
  --sombra-3: 0 16px 40px rgb(0 0 0 / 0.5);
}