/* Protemax Segurança — marca base (etapa 1) — tokens.css
   Cores tiradas do selo atual (id/logo-atual/selo-protemax-instagram-1080.jpg, 12/11/2026, DADOS.md "Marca atual").
   designer3, tarefa #61. */

:root {
  /* 1. Marca (medida no selo) */
  --pm-vermelho: #CF0001;        /* claro do escudo: fundo de botão e bloco (branco sobre ele 5,75:1) */
  --pm-vermelho-medio: #940001;  /* meio do degradê do escudo */
  --pm-vermelho-escuro: #430001; /* sombra do escudo */
  --pm-preto: #000000;
  --pm-branco: #FFFFFF;
  --pm-amarelo: #FBEF07;         /* estrela: só detalhe e foco sobre preto (17:1) */

  /* 2. Apoio */
  --pm-noite: #0B0B0C;           /* fundo das seções escuras */
  --pm-grafite: #17171A;         /* superfície sobre a noite */
  --pm-cinza: #B4B4BA;           /* texto secundário sobre a noite (9,5:1) */
  --pm-nevoa: #F2F2F3;           /* seção clara */
  --pm-tinta: #141416;           /* texto sobre claro */
  --pm-tinta-suave: #4D4D55;     /* texto secundário sobre claro (7,5:1) */
  --pm-vermelho-texto: #FF4D4D;  /* vermelho em texto pequeno sobre a noite (6,0:1) */
  --pm-linha: rgba(255, 255, 255, .12);
  --pm-degrade-escudo: linear-gradient(180deg, #CF0001 0%, #940001 55%, #430001 100%);

  /* 3. Papéis — tema escuro */
  --cor-fundo: var(--pm-noite);
  --cor-superficie: var(--pm-grafite);
  --cor-titulo: var(--pm-branco);
  --cor-texto: #ECECEE;
  --cor-texto-suave: var(--pm-cinza);
  --cor-destaque: var(--pm-vermelho-texto);
  --cor-foco: var(--pm-amarelo);
  --cor-botao: var(--pm-vermelho);
  --cor-botao-texto: var(--pm-branco);
  --cor-botao-hover: #E80A0A;
  --cor-linha: var(--pm-linha);

  /* 4. Tipografia (Open Sans, OFL 1.1, a mais próxima do "PROTEMAX" do selo) */
  --fonte-titulo: "Open Sans", "Segoe UI", Arial, sans-serif;
  --fonte-texto: "Open Sans", "Segoe UI", Arial, sans-serif;
  --peso-titulo: 800;
  --peso-forte: 700;
  --fs-mega: clamp(3.5rem, 1rem + 11vw, 11rem);
  --fs-display: clamp(2.5rem, 1.2rem + 5vw, 5.75rem);
  --fs-h2: clamp(2rem, 1.2rem + 3vw, 3.75rem);
  --fs-h3: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
  --fs-texto: clamp(1rem, .96rem + .2vw, 1.125rem);
  --fs-pequeno: .875rem;
  --fs-etiqueta: .8125rem;
  --tracking-titulo: -.02em;
  --tracking-etiqueta: .16em;
  --medida-texto: 62ch;

  /* 5. Espaço (8 pt) e grid */
  --esp-1: .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;
  --calha: clamp(1rem, 2vw, 2rem);
  --margem: clamp(1.25rem, 5vw, 5rem);
  --largura-max: 90rem;

  /* 6. Forma: o escudo tem cantos vivos; botão com canto mínimo */
  --raio: 2px;
  --borda: 2px;

  /* 7. Movimento */
  --curva-saida: cubic-bezier(.22, 1, .36, 1);
  --curva-padrao: cubic-bezier(.4, 0, .2, 1);
  --tempo-micro: 160ms;
  --tempo-ui: 300ms;
  --tempo-revelar: 700ms;
  --escalonar: 70ms;
  --zoom-foto: 1.03;

  /* 8. Textura */
  --grao-opacidade: .04;
}

[data-tema="claro"] {
  --cor-fundo: var(--pm-nevoa);
  --cor-superficie: var(--pm-branco);
  --cor-titulo: var(--pm-preto);
  --cor-texto: var(--pm-tinta);
  --cor-texto-suave: var(--pm-tinta-suave);
  --cor-destaque: var(--pm-vermelho);           /* #CF0001 sobre névoa 5,1:1 */
  --cor-foco: var(--pm-vermelho);
  --cor-linha: rgba(0, 0, 0, .12);
}

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