/* ══════════════════════════════════════════════════════════
   TOKENS — única fonte de verdade de cores, fontes e espaços.
   Nenhum outro CSS usa valores fixos: apenas var(--token).
   Paleta e tipografia oficiais da marca Agencis.
   ══════════════════════════════════════════════════════════ */

:root {
  /* ── Cores da marca ─────────────────────────────────────── */
  --cor-fundo:       #08060A;   /* Deep Black — fundo dominante */
  --cor-superficie:  #19100E;   /* Surface — cards e seções elevadas */
  --cor-destaque:    #FF7416;   /* Primary Orange — CTAs, links, foco */
  --cor-coral:       #FF4F4F;   /* Red Coral */
  --cor-magenta:     #D82762;   /* Mauve Pink */
  --cor-violeta:     #990066;   /* Violet Action */

  /* A rampa cromática da marca — a "tinta" do polvo */
  --gradiente-marca: linear-gradient(120deg,
                       #FF7416 0%, #FF4F4F 34%,
                       #D82762 68%, #990066 100%);
  --gradiente-marca-vertical: linear-gradient(180deg,
                       #FF7416 0%, #FF4F4F 34%,
                       #D82762 68%, #990066 100%);
  /* ── Texto e superfícies derivadas ──────────────────────── */
  --cor-texto:        #F1ECE7;  /* branco quente — corpo */
  --cor-texto-suave:  #9C918C;  /* cinza quente — legendas, metadados */
  --cor-texto-escuro: #08060A;  /* texto sobre superfícies claras/acesas */
  --cor-borda:        rgba(241, 236, 231, 0.08);
  --cor-borda-forte:  rgba(241, 236, 231, 0.18);
  --cor-veu:          rgba(8, 6, 10, 0.72);       /* véu sobre imagens/menus */
  --cor-brilho:       rgba(255, 116, 22, 0.14);   /* glow laranja sutil */

  /* ── Tipografia ─────────────────────────────────────────── */
  --fonte-titulo: 'Manrope', system-ui, sans-serif;      /* headlines, corpo e UI */
  --fonte-serif:  'Fraunces', 'Roboto Serif', Georgia, serif;        /* SÓ palavras-chave e manifesto */
  --fonte-mono:   'IBM Plex Mono', ui-monospace, monospace; /* labels, tags, métricas */

  /* Pesos padrão — pareamento validado Manrope ↔ Fraunces.
     A Fraunces só ganha a compensação de tamanho quando fica INLINE
     junto da Manrope (palavra-chave dentro da headline); em uso
     isolado (frase-manifesto, código 404) não se aplica. */
  --peso-titulo:   600;   /* toda headline Manrope */
  --peso-serif:    400;   /* Fraunces inline na headline — TETO: nunca acima de 400 */
  --serif-escala:  1.2;   /* compensa o x-height menor da Fraunces inline */
  --serif-opsz:    72;    /* tamanho óptico FIXO da Fraunces — mantém a mesma
                             espessura em qualquer tamanho de headline (senão
                             o opsz automático engorda os títulos maiores) */
  --serif-tracking: -0.07em; /* espacejamento PADRÃO de TODA Fraunces (inline e títulos) */

  /* Escala fluida */
  --texto-xs:   clamp(0.6875rem, 0.9vw,  0.75rem);
  --texto-sm:   clamp(0.8125rem, 1vw,    0.9375rem);
  --texto-md:   clamp(1rem,      1.4vw,  1.1875rem);
  --texto-lg:   clamp(1.375rem,  2.4vw,  2rem);
  --texto-xl:   clamp(2rem,      4.5vw,  3.75rem);
  --texto-2xl:  clamp(2.75rem,   7vw,    6.5rem);
  --texto-3xl:  clamp(3.25rem,   10vw,   9.5rem);

  /* Tracking */
  --tracking-apertado: -0.03em;
  --tracking-titulo:   -0.015em;
  --tracking-largo:     0.14em;

  /* ── Espaçamentos ───────────────────────────────────────── */
  --espaco-2xs: 0.25rem;
  --espaco-xs:  0.5rem;
  --espaco-sm:  1rem;
  --espaco-md:  2rem;
  --espaco-lg:  4rem;
  --espaco-xl:  7rem;
  --espaco-2xl: 11rem;

  /* ── Layout ─────────────────────────────────────────────── */
  --largura-conteudo: min(92vw, 87.5rem);
  --altura-header:    5rem;

  /* ── Bordas ─────────────────────────────────────────────── */
  --raio-sm:   4px;
  --raio-md:   12px;
  --raio-lg:   28px;
  --raio-full: 9999px;

  /* ── Transições ─────────────────────────────────────────── */
  --transicao-rapida: 0.15s ease;
  --transicao-media:  0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transicao-lenta:  0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Z-index ────────────────────────────────────────────── */
  --z-base:      1;
  --z-flutuante: 50;
  --z-menu:      100;
  --z-modal:     200;
  --z-topo:      300;
}