/* Base Cliqe: kerning, tracking e letter-spacing.
   Copiar para qualquer projeto (site de cliente, arte HTML, banner) e trocar só --font-family-brand.
   Regras completas: identidade/diagramacao/PADRAO.md */

:root{
  --font-family-brand:"Space Grotesk",Arial,sans-serif; /* trocar pela fonte do cliente */

  /* Tracking (letter-spacing uniforme por papel) */
  --tracking-tighter:-0.02em;   /* display, hero */
  --tracking-tight:-0.015em;    /* H1, H2 */
  --tracking-heading:-0.01em;   /* H3, H4 */
  --tracking-normal:0em;        /* corpo */
  --tracking-subtle:0.01em;     /* legenda, navegação */
  --tracking-button:0.02em;     /* botão */
  --tracking-wide:0.04em;       /* rótulo */
  --tracking-wider:0.06em;      /* caixa alta curta */

  /* Kerning de pares (deslocamento do que vem depois do caractere marcado) */
  --kerning-punct:-0.04em;
  --kerning-tight:-0.03em;
  --kerning-open:0.02em;
}

/* 1. Kerning ligado em tudo, inclusive controles de formulário (não herdam sozinhos). */
html{font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1,"dlig" 0;text-rendering:optimizeLegibility;font-synthesis:none}
button,input,select,textarea{font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1,"dlig" 0}

/* 2 e 3. Tracking por papel, declarado explicitamente como letter-spacing. */
body{font-family:var(--font-family-brand);letter-spacing:var(--tracking-normal)}
.t-display,.t-hero{letter-spacing:var(--tracking-tighter)}
h1,h2,.t-h1,.t-h2{letter-spacing:var(--tracking-tight)}
h3,h4,.t-h3,.t-h4{letter-spacing:var(--tracking-heading)}
p,input,textarea,select,.t-body{letter-spacing:var(--tracking-normal)}
figcaption,small,nav,.t-caption{letter-spacing:var(--tracking-subtle)}
button,.button,.t-button{letter-spacing:var(--tracking-button)}
label,.t-label{letter-spacing:var(--tracking-wide)}
.t-caps{text-transform:uppercase;letter-spacing:var(--tracking-wider)} /* caixa alta sempre com tracking positivo */
input::placeholder,textarea::placeholder{font:inherit;letter-spacing:inherit}

/* 4. Kerning de pares, depois da revisão óptica. Ex.: escolhid<span class="k-punct">o</span>. */
.k-punct{margin-inline-end:var(--kerning-punct)}
.k-tight{margin-inline-end:var(--kerning-tight)}
.k-open{margin-inline-end:var(--kerning-open)}

/* Logotipo: desenho, sem tracking nem kerning de CSS. */
.logo,.logo *{letter-spacing:0;font-kerning:none}