/**
 * Telefer — tokens de design (escala global).
 *
 * Carregado em TODO o site, antes do main.css.
 * Os tokens de cor --telefer-* continuam definidos no main.css e não mudam aqui.
 * Este arquivo só ACRESCENTA: fontes self-host, espaço, tipografia, forma e layout.
 * Referência: docs/REDESIGN-LP.md §4.3 e §5.
 *
 * Único arquivo onde hex e px soltos são permitidos (stylelint).
 */

/* --------------------------------------------------------------------------
   Fontes self-host (woff2, subconjunto latino, cobre pt-BR)
   Bricolage Grotesque — títulos e voz da marca (variável: wght 200–800, opsz 12–96)
   Instrument Sans     — texto corrido (variável: wght 400–700)
   IBM Plex Mono       — números, timers, telemetria (400 e 500)
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Bricolage Grotesque';
	src: url('../fonts/bricolage-grotesque-var-latin.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Instrument Sans';
	src: url('../fonts/instrument-sans-var-latin.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Fallbacks métricos (evitam CLS na troca de fonte).
 * Valores medidos com fontTools sobre uma frase pt-BR de referência:
 * size-adjust = largura da fonte web / largura do fallback;
 * ascent/descent = métrica da fonte web / size-adjust.
 */
@font-face {
	font-family: 'Bricolage Fallback';
	src: local('Arial'), local('ArialMT'), local('Helvetica');
	font-weight: 200 500;
	size-adjust: 104.35%;
	ascent-override: 89.1%;
	descent-override: 25.9%;
	line-gap-override: 0%;
}

@font-face {
	font-family: 'Bricolage Fallback';
	src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold');
	font-weight: 600 800;
	size-adjust: 97.1%;
	ascent-override: 95.8%;
	descent-override: 27.8%;
	line-gap-override: 0%;
}

/*
 * Fallback do H1 do hero (peso 780) em telas < 1024 px.
 * Por causa do eixo óptico (opsz), a Bricolage fica mais larga em corpo pequeno:
 * razão de largura Bricolage 780 / Arial Bold no título real = 0,995 a 34 px e 0,987 a 40 px
 * (0,955 a 64 px, por isso não serve no desktop). Com 99 %, a troca de fonte não aumenta
 * o H1 (não gera novo LCP) nem quebra linha diferente (sem CLS). Ascent/descent = métricas
 * da Bricolage (Fase 1) ÷ 0,99.
 */
@font-face {
	font-family: 'Bricolage Hero Fallback';
	src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold');
	font-weight: 600 800;
	size-adjust: 99%;
	ascent-override: 93.97%;
	descent-override: 27.27%;
	line-gap-override: 0%;
}

@font-face {
	font-family: 'Instrument Fallback';
	src: local('Arial'), local('ArialMT'), local('Helvetica');
	font-weight: 400 500;
	size-adjust: 100.93%;
	ascent-override: 96.1%;
	descent-override: 24.8%;
	line-gap-override: 0%;
}

@font-face {
	font-family: 'Instrument Fallback';
	src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold');
	font-weight: 600 700;
	size-adjust: 97.64%;
	ascent-override: 99.4%;
	descent-override: 25.6%;
	line-gap-override: 0%;
}

@font-face {
	font-family: 'Plex Mono Fallback';
	src: local('Courier New'), local('CourierNewPSMT'), local('Courier');
	size-adjust: 100%;
	ascent-override: 102.5%;
	descent-override: 27.5%;
	line-gap-override: 0%;
}

:root {
	/* Fontes (os nomes --telefer-font-* são os mesmos que o main.css já usa) */
	--telefer-font-heading: 'Bricolage Grotesque', 'Bricolage Fallback', sans-serif;
	--telefer-font-alt: 'Bricolage Grotesque', 'Bricolage Fallback', sans-serif;
	--telefer-font-body: 'Instrument Sans', 'Instrument Fallback', sans-serif;
	--telefer-font-mono: 'IBM Plex Mono', 'Plex Mono Fallback', monospace;
	--telefer-font-hero-mobile: 'Bricolage Grotesque', 'Bricolage Hero Fallback', sans-serif;

	/* Cores: os --telefer-* existentes continuam valendo. Derivados: */
	--telefer-navy-900: color-mix(in oklab, var(--telefer-primary-dark), black 35%);
	--telefer-navy-700: color-mix(in oklab, var(--telefer-primary-dark), black 15%);
	--telefer-navy-300: color-mix(in oklab, var(--telefer-primary-dark), white 40%);
	--telefer-line: color-mix(in oklab, #fff 14%, transparent);
	--telefer-line-strong: color-mix(in oklab, #fff 28%, transparent);
	--telefer-line-dark: color-mix(in oklab, var(--telefer-primary-dark) 14%, transparent);
	--telefer-ice: color-mix(in oklab, var(--telefer-icon-bg), white 55%);

	/* Espaço: escala 4/8 */
	--telefer-s-1: 4px;
	--telefer-s-2: 8px;
	--telefer-s-3: 12px;
	--telefer-s-4: 16px;
	--telefer-s-5: 24px;
	--telefer-s-6: 32px;
	--telefer-s-7: 48px;
	--telefer-s-8: 64px;
	--telefer-s-9: 96px;
	--telefer-s-10: 128px;
	--telefer-section-y: clamp(var(--telefer-s-8), 8vw, var(--telefer-s-10));

	/* Tipografia fluida */
	--telefer-t-xs: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
	--telefer-t-sm: clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);
	--telefer-t-md: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	--telefer-t-lg: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
	--telefer-t-xl: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
	--telefer-t-2xl: clamp(2.5rem, 1.6rem + 4.2vw, 5.5rem);
	/* H1 do hero: título longo (≈ 70 caracteres) — entre o xl e o 2xl */
	--telefer-t-hero: clamp(2.125rem, 1.45rem + 2.9vw, 4rem);

	--telefer-lh-tight: 1.04;
	--telefer-lh-snug: 1.18;
	--telefer-lh-body: 1.55;
	--telefer-track-tight: -0.015em;
	--telefer-track-label: 0.08em;
	--telefer-measure: 68ch;

	/* Forma */
	--telefer-r-1: 4px;
	--telefer-r-2: 8px;
	--telefer-r-3: 16px; /* + --telefer-radius-pill existente */
	--telefer-shadow-1: 0 1px 2px rgb(0 0 0 / 0.18);
	--telefer-shadow-2: 0 8px 24px rgb(0 0 0 / 0.22);
	--telefer-shadow-3: 0 24px 64px rgb(0 0 0 / 0.32);
	--telefer-focus-ring: 0 0 0 2px var(--telefer-primary-dark), 0 0 0 4px var(--telefer-accent);

	/* Traços finos (hairline, sublinhado, anel do LED) e tinta para máscaras */
	--telefer-hair: 1px;
	--telefer-stroke-2: 2px;
	--telefer-stroke-3: 3px;
	--telefer-ink: #000;

	/* Layout — breakpoints (mobile-first): 360 · 640 · 768 · 1024 · 1280 · 1536
	   (Elementor: mobile ≤ 767, tablet ≤ 1024) */
	--telefer-gutter: clamp(var(--telefer-s-4), 4vw, var(--telefer-s-6));
	--telefer-grid-cols: 4;
	--telefer-grid-gap: var(--telefer-s-4);
	--telefer-touch: 44px;
	/* Barra fixa inferior do mobile (home): altura útil, sem a área segura */
	--telefer-actionbar-h: 68px;

	/* Movimento */
	--telefer-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--telefer-dur-1: 150ms;
	--telefer-dur-2: 300ms;
	--telefer-dur-3: 600ms;
}

@media (min-width: 768px) {
	:root {
		--telefer-grid-cols: 6;
		--telefer-grid-gap: var(--telefer-s-5);
	}
}

@media (min-width: 1024px) {
	:root {
		--telefer-grid-cols: 12;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--telefer-dur-1: 0ms;
		--telefer-dur-2: 0ms;
		--telefer-dur-3: 0ms;
	}
}