/* ==========================================================================
   OperGama : tokens de marca
   OG-WEB-001 Seccao 5. Fonte unica de verdade para cor, tipografia,
   espacamento, forma e movimento.

   Regra inviolavel: nao existe token verde. Nao se cria nenhum.
   Regra inviolavel: o Dourado e sempre veio, nunca mancha.
   ========================================================================== */

:root {
  /* ---- Primarias claras: dominam sempre (50 a 60 por cento) ---- */
  --og-ice-crystal: #E2E0D9;
  --og-taj-mahal: #E0D9CC;
  --og-white-everest: #E3DCD1;
  --og-branco: #FFFFFF;

  /* ---- Secundaria ---- */
  --og-amethyst: #C7AF98;

  /* ---- Acento: sempre veio, nunca mancha ---- */
  --og-dourado: #C4961A;
  --og-dourado-claro: #E8D4A0;

  /* ---- Suporte, texto e contraste ---- */
  --og-carvao: #3A332E;
  --og-black-tempest: #41423F;
  --og-sky-stone: #999A91;
  --og-cinzento-neutro: #8A8880;

  /* ---- Funcional ---- */
  --og-alerta: #B5452E;

  /* ---- Semanticos ---- */
  --og-fundo: var(--og-ice-crystal);
  --og-fundo-alt: var(--og-taj-mahal);
  --og-fundo-escuro: var(--og-black-tempest);
  --og-superficie: var(--og-branco);
  --og-texto: var(--og-carvao);
  --og-texto-secundario: var(--og-cinzento-neutro);
  --og-texto-terciario: var(--og-sky-stone);
  --og-texto-inverso: var(--og-ice-crystal);
  --og-borda: rgba(58, 51, 46, 0.12);
  --og-borda-dourada: var(--og-dourado);

  /* Texto secundario efectivo sobre fundos claros.
     O Cinzento Neutro #8A8880 sobre Ice Crystal da apenas 2.6:1, insuficiente
     para texto corrido, pelo que o texto secundario visivel usa Carvao a 78
     por cento, verificado acima de 4.5:1. Ver README, seccao de contraste. */
  --og-texto-suave: #5B534C;

  /* Dourado escurecido, para todo o texto em Dourado sobre fundos claros:
     etiquetas, ligacoes em linha e valores. Verificado par a par:
     5.43:1 sobre Ice Crystal, 5.11:1 sobre Taj Mahal, 7.17:1 sobre Branco.
     O Dourado puro #C4961A da apenas 2.06:1 sobre Ice Crystal e por isso
     nunca suporta texto sobre fundos claros. */
  --og-dourado-texto: #705304;

  /* Dourado do estado de rato do botao primario. O Dourado puro com texto
     Carvao esta em 4.56:1, no limite. Escurecer, como pede a Seccao 8, faria
     descer para 3.89:1 e reprovaria no criterio AA da Seccao 12.1, pelo que o
     estado de rato clareia em vez de escurecer: 5.29:1. */
  --og-dourado-rato: #D0A32A;

  /* ---- Tipografia ---- */
  --og-fonte-titulo: 'Inter', system-ui, -apple-system, sans-serif;
  --og-fonte-corpo: 'Source Serif 4', Georgia, serif;
  --og-fonte-mono: 'JetBrains Mono', ui-monospace, monospace;

  --og-t-display-xl: clamp(2.75rem, 6vw, 4.5rem);
  --og-t-display-l: clamp(2rem, 4vw, 3rem);
  --og-t-h1: clamp(1.75rem, 3vw, 2.25rem);
  --og-t-h2: clamp(1.375rem, 2.5vw, 1.75rem);
  --og-t-h3: 1.25rem;
  --og-t-lead: 1.125rem;
  --og-t-corpo: 1rem;
  --og-t-pequeno: 0.875rem;
  --og-t-label: 0.75rem;
  --og-t-metrica: clamp(2rem, 4vw, 3rem);

  --og-entrelinha-corpo: 1.6;
  --og-entrelinha-titulo: 1.15;
  --og-medida: 68ch;

  /* ---- Espacamento, multiplos de 8 ---- */
  --og-esp-1: 4px;
  --og-esp-2: 8px;
  --og-esp-3: 16px;
  --og-esp-4: 24px;
  --og-esp-5: 32px;
  --og-esp-6: 48px;
  --og-esp-7: 64px;
  --og-esp-8: 96px;
  --og-esp-9: 128px;
  --og-esp-10: 160px;

  /* ---- Grelha e contentor ---- */
  --og-contentor: 1200px;
  --og-margem-lateral: 20px;
  --og-gutter: 16px;
  --og-colunas: 4;
  --og-altura-cabecalho: 72px;
  --og-secao-y: var(--og-esp-8);

  /* ---- Forma ---- */
  --og-raio-botao: 8px;
  --og-raio-cartao: 12px;
  --og-raio-imagem: 8px;
  --og-raio-campo: 8px;
  --og-raio-etiqueta: 999px;

  /* ---- Sombras ---- */
  --og-sombra-subtil: 0 1px 3px rgba(58, 51, 46, 0.08);
  --og-sombra-padrao: 0 4px 12px rgba(58, 51, 46, 0.10);
  --og-sombra-elevada: 0 8px 24px rgba(58, 51, 46, 0.12);

  /* ---- Movimento ---- */
  --og-transicao: 220ms ease-out;
  --og-transicao-lenta: 300ms ease-out;
}

@media (min-width: 768px) {
  :root {
    --og-margem-lateral: 40px;
    --og-gutter: 20px;
    --og-colunas: 8;
  }
}

@media (min-width: 1280px) {
  :root {
    --og-margem-lateral: 80px;
    --og-gutter: 24px;
    --og-colunas: 12;
    --og-secao-y: var(--og-esp-9);
  }
}