/* ==========================================================================
   Ímã Marketing — tokens
   Duas superfícies: tinta (escuro quente) e papel (claro).
   As variáveis de texto (--t-1..3) e de régua trocam de valor conforme a
   superfície; tudo o mais na página lê essas variáveis e segue sozinho.
   ========================================================================== */
:root {
  /* Superfícies */
  --ink: #08060C;
  --ink-2: #100B18;
  --paper: #F2EDE4;
  --paper-2: #E6DFD2;

  /* Marca — uso restrito: CTA, score do diagnóstico, a palavra LEADS */
  --red: #FF0A46;
  --red-rgb: 255, 10, 70;
  --red-deep: #D2003A;      /* sobre papel: atinge AA para texto */
  
  --purple-glow: rgba(122,47,242,.30);
  --red-glow: rgba(196,12,58,.20);

  /* Tipografia */
  --font-display: 'Sora', sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-data: 'DM Mono', ui-monospace, monospace;

  /* Andamento — o que impede a página de andar no mesmo passo */
  --pace-open: clamp(110px, 12vw, 190px);
  --pace-base: clamp(80px, 8vw, 130px);
  --pace-tight: clamp(56px, 5vw, 88px);

  /* Medidas */
  --shell: 1180px;
  --shell-narrow: 900px;
  /* A goteira é o que separa o texto da borda do ecrã. Nunca deve chegar a
     zero: abaixo de ~20px a leitura no telemóvel colapsa contra a moldura. */
  --gutter: clamp(22px, 4.4vw, 48px);

  /* Curvas e Raio */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --radius-card: 18px;
  --radius-btn: 999px;
  --radius-input: 11px;
}

/* Superfície tinta — o padrão da página */
.on-ink {
  --surface: var(--ink);
  --surface-2: var(--ink-2);
  --t-1: #F2EEF5;
  --t-2: #C7C0D2;
  --t-3: #9C93AC;
  --t-4: #8C8399;
  --rule: rgba(255, 255, 255, .07);
  --rule-strong: rgba(255, 255, 255, .15);
  --brand: var(--red);
}

/* Superfície papel — seções 5 e 7, o que o lead recebe */
.on-paper {
  --surface: var(--paper);
  --surface-2: var(--paper-2);
  --t-1: #14110E;
  --t-2: #3A342D;
  --t-3: #6B6359;
  --rule: rgba(20, 17, 14, .14);
  --rule-strong: rgba(20, 17, 14, .26);
  --brand: var(--red-deep);
}