/* Ninaut Advocacia — marca base (etapa 1) — tokens.css
   Única fonte de cores, fontes, espaço, forma e movimento para o site e o cartão.
   Cores da marca medidas no logo real (fotos/google/gmb-01.png e fotos/facebook/fb-08, 11/11/2026)
   e nos posts do escritório (fb-03, fb-07). Contraste WCAG 2.2 calculado (valores ao lado de cada cor).
   entregas-identidade, tarefa #138. */

:root {
  /* 1. Marca (medida, não muda) */
  --ninaut-chocolate: #441C0C;   /* fundo do logo e das artes */
  --ninaut-ocre: #C07F26;        /* quadrado do N, regra, palavras em destaque nos posts */
  --ninaut-branco: #FFFFFF;      /* nome "Ninaut ADVOCACIA" no logo */

  /* 2. Apoio (derivadas da marca, cada uma com papel) */
  --ninaut-cacau: #2A1007;             /* fundo mais profundo; texto sobre ocre (5,36:1) */
  --ninaut-terra: #7F4416;             /* meio do degradê dos posts; destaque e link em fundo claro (7,66:1) */
  --ninaut-ocre-claro: #E0A85A;        /* texto pequeno, link e foco sobre chocolate (7,0:1) */
  --ninaut-nevoa: #F3F0EE;             /* superfície clara alternativa (neutra, não creme) */
  --ninaut-tinta: #3B2418;             /* texto em fundo claro (14,5:1) */
  --ninaut-tinta-suave: #6E5548;       /* texto secundário em fundo claro (6,9:1; 6,1:1 na névoa) */
  --ninaut-texto-claro: #F3E9E1;       /* texto corrido sobre chocolate (12,4:1) */
  --ninaut-texto-claro-suave: #C9B3A3; /* texto secundário sobre chocolate (7,4:1) */
  --ninaut-linha-clara: #E3DAD3;       /* divisória decorativa em fundo claro */
  --ninaut-borda-clara: #7A6152;       /* borda de campo em fundo claro (5,7:1) */
  --ninaut-borda-escura: #B89E8C;      /* borda de campo sobre chocolate (5,9:1) */
  --ninaut-degrade-ocre: linear-gradient(180deg, #B67827 0%, #7F4416 55%, #5D1506 100%); /* quadrados dos posts; só em forma decorativa */

  /* 3. Papéis — tema escuro (o padrão da marca: fundo chocolate) */
  --cor-fundo: var(--ninaut-chocolate);
  --cor-fundo-profundo: var(--ninaut-cacau);
  --cor-titulo: var(--ninaut-branco);
  --cor-texto: var(--ninaut-texto-claro);
  --cor-texto-suave: var(--ninaut-texto-claro-suave);
  --cor-destaque: var(--ninaut-ocre);          /* texto só a partir de 24px (ou 18,66px negrito): 4,45:1 */
  --cor-destaque-texto: var(--ninaut-ocre-claro); /* destaque em texto pequeno */
  --cor-link: var(--ninaut-ocre-claro);
  --cor-foco: var(--ninaut-ocre-claro);
  --cor-borda: var(--ninaut-borda-escura);
  --cor-linha: rgba(224, 168, 90, 0.28);       /* divisória decorativa sobre chocolate */
  --cor-botao: var(--ninaut-ocre);
  --cor-botao-texto: var(--ninaut-cacau);
  --cor-botao-hover: var(--ninaut-ocre-claro);

  /* 4. Tipografia (licença OFL 1.1 conferida no google/fonts; arquivos em site/assets/fonts/) */
  --fonte-titulo: "Cinzel", Georgia, "Times New Roman", serif;          /* a fonte real dos títulos dos posts */
  --fonte-texto: "Fira Sans", "Segoe UI", Roboto, system-ui, sans-serif;
  --peso-titulo: 600;
  --peso-titulo-forte: 700;
  --peso-texto: 400;
  --peso-ui: 500;
  --peso-botao: 600;
  --fs-display: clamp(2.75rem, 1.6rem + 5.2vw, 6.5rem);  /* hero: 6x o texto */
  --fs-h1: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 2.2vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
  --fs-texto: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-pequeno: 0.875rem;
  --fs-etiqueta: 0.8125rem;
  --lh-display: 1.02;
  --lh-titulo: 1.1;
  --lh-texto: 1.6;
  --tracking-titulo: 0.02em;
  --tracking-etiqueta: 0.24em;   /* eco do "A D V O C A C I A" do logo */
  --medida-texto: 65ch;

  /* 5. Espaço (escala de 8 pt) e grid */
  --esp-1: 0.5rem;
  --esp-2: 1rem;
  --esp-3: 1.5rem;
  --esp-4: 2rem;
  --esp-5: 3rem;
  --esp-6: 4rem;
  --esp-7: 6rem;
  --esp-8: 8rem;
  --esp-9: 10rem;
  --grid-colunas: 12;
  --grid-calha: clamp(1rem, 2vw, 2rem);
  --margem-lateral: clamp(1.25rem, 5vw, 5rem);
  --largura-max: 82.5rem;

  /* 6. Forma: cantos retos, como o quadrado do N */
  --raio-0: 0;
  --raio-1: 2px;                 /* campo de formulário e botão: no máximo isto */
  --linha-ocre: 2px;             /* a regra do logo como divisor */
  --borda-fina: 1px;

  /* 7. Profundidade (sombra quente, nunca cinza-azulada) */
  --sombra-1: 0 1px 2px rgba(26, 9, 3, 0.18), 0 2px 8px rgba(26, 9, 3, 0.12);
  --sombra-2: 0 18px 40px -16px rgba(26, 9, 3, 0.45);
  --sombra-foto: 0 30px 60px -30px rgba(26, 9, 3, 0.6);

  /* 8. Movimento (1.3: entradas escalonadas de 60 a 90 ms; animar só transform e opacity) */
  --curva-saida: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-entrada: cubic-bezier(0.64, 0, 0.78, 0);
  --curva-padrao: cubic-bezier(0.4, 0, 0.2, 1);
  --tempo-micro: 160ms;
  --tempo-ui: 320ms;
  --tempo-revelar: 700ms;
  --tempo-hero: 1100ms;
  --escalonar: 70ms;
  --subir-card: -2px;
  --zoom-foto: 1.025;

  /* 9. Textura */
  --grao-opacidade: 0.035;       /* grão SVG de 2 a 4% (1.3) sobre o chocolate */
}

/* Seção clara: fundo branco, títulos em chocolate */
[data-tema="claro"] {
  --cor-fundo: var(--ninaut-branco);
  --cor-fundo-profundo: var(--ninaut-nevoa);
  --cor-titulo: var(--ninaut-chocolate);
  --cor-texto: var(--ninaut-tinta);
  --cor-texto-suave: var(--ninaut-tinta-suave);
  --cor-destaque: var(--ninaut-ocre);          /* só texto >= 24px e só sobre branco (3,33:1); na névoa use terra */
  --cor-destaque-texto: var(--ninaut-terra);
  --cor-link: var(--ninaut-terra);
  --cor-foco: var(--ninaut-terra);
  --cor-borda: var(--ninaut-borda-clara);
  --cor-linha: var(--ninaut-linha-clara);
  --cor-botao: var(--ninaut-chocolate);
  --cor-botao-texto: var(--ninaut-branco);
  --cor-botao-hover: var(--ninaut-terra);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tempo-revelar: 1ms;
    --tempo-hero: 1ms;
    --escalonar: 0ms;
    --zoom-foto: 1;
    --subir-card: 0px;
  }
}