/* First Touch — design tokens (derivados da marca real: logo vermelho industrial + aço) */
:root{
  /* Cor — marca */
  --red:#C7181A;          /* vermelho institucional (botão + acento, branco AA 5.88:1) */
  --red-bright:#FF5A4E;   /* acento sobre fundo escuro (AA 5.78:1) */
  --red-deep:#B01418;     /* texto vermelho sobre claro (AA 6.44:1) */
  --red-wash:rgba(199,24,26,.10);

  /* Neutros — aço/concreto */
  --ink:#16181C;          /* grafite (fundo escuro + texto principal claro) */
  --ink-2:#1F2226;        /* superfície escura elevada */
  --paper:#F4F4F2;        /* concreto claro (fundo padrão) */
  --paper-2:#EBEBE8;      /* superfície clara elevada */
  --line:#DEDEDA;         /* divisórias no claro */
  --line-dark:rgba(255,255,255,.14);

  --text:#16181C;         /* texto sobre claro (16:1) */
  --muted:#565E66;        /* texto de apoio sobre claro (5.98:1) */
  --on-dark:#ECEBE8;      /* texto sobre escuro (14.9:1) */
  --muted-dark:#A7ADB4;   /* apoio sobre escuro (7.85:1) */

  /* Tipografia */
  --font-display:"Archivo","Segoe UI",sans-serif;
  --font-body:"Hanken Grotesk","Segoe UI",sans-serif;
  --fw-body:400; --fw-med:500; --fw-semi:600; --fw-bold:700; --fw-black:800;

  /* Escala fluida */
  --fs-eyebrow:clamp(.72rem,.68rem + .2vw,.8rem);
  --fs-body:clamp(1rem,.97rem + .18vw,1.12rem);
  --fs-lede:clamp(1.12rem,1.03rem + .5vw,1.42rem);
  --h4:clamp(1.1rem,1rem + .5vw,1.35rem);
  --h3:clamp(1.35rem,1.1rem + 1.1vw,1.85rem);
  --h2:clamp(2rem,1.5rem + 2.4vw,3.4rem);
  --h1:clamp(2.5rem,1.7rem + 3.9vw,5rem);

  /* Espaço / ritmo */
  --container:1220px;
  --gutter:clamp(20px,5vw,40px);
  --sp-sec:clamp(64px,7vw,104px);

  /* Raio / sombra (variados por hierarquia, não uniformes) */
  --r-sm:3px; --r-md:6px; --r-lg:12px;
  --shadow-card:0 22px 50px -30px rgba(16,18,22,.5);

  /* Movimento */
  --e:cubic-bezier(.16,.84,.28,1);
  --e2:cubic-bezier(.4,0,.2,1);
}