/*
 * Tokens do DS LIVO — referência PROVISÓRIA.
 *
 * Fonte: Figma "LIVO v5.3 — Páginas Complementarias", página 01 · Foundations
 * (variáveis Theme colors / Spacings e 18 text styles, "valores exatos do maestro V5.2").
 * Ainda NÃO contrastados com o código do storefront v5.2 (sem acesso ao repositório).
 * Os nomes seguem as variáveis do Figma ("theme slate/text-primary" → --theme-slate-text-primary).
 *
 * Valores marcados [PROVISÓRIO-TEMA] não existem no Figma e foram definidos pelo tema
 * até haver referência do storefront.
 */

:root {
	/* Theme colors */
	--theme-slate-text-primary: #020618;
	--theme-slate-text-muted: #62748e;
	--theme-slate-text-contrast: #f8fafc;
	--theme-slate-bg-default: #ffffff;
	--theme-slate-bg-default-hover: #f1f5f9;
	--theme-slate-border-default: #e2e8f0;
	--theme-blue-brand-primary: #1447e6;
	--theme-blue-brand-hover: #1c398e;
	--theme-blue-brand-disabled: #8ec5ff;
	--status-error: #fb2c36;
	--status-success: #00bc7d;
	--status-warn: #fe9a00;

	/* Spacings */
	--spacing-1: 4px;
	--spacing-2: 8px;
	--spacing-3: 12px;
	--spacing-4: 16px;
	--spacing-5: 20px;
	--spacing-6: 24px;
	--spacing-8: 32px;
	--spacing-10: 40px;
	--spacing-12: 48px;

	/* Radius: a escala existe, mas "em V5.2 todos os componentes usam radius 0". Sem sombras. */
	--radius: 0;

	/* Famílias */
	--font-text: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--font-monotype: "Intel One Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Text styles (tamanho / entrelinha / peso / tracking) */
	--text-xxs-size: 9px;
	--text-xxs-lh: 16px;
	--text-xs-size: 11px;
	--text-xs-lh: 20px; /* regular = 20; light/Medium = 18 */
	--text-sm-size: 13px;
	--text-sm-lh: 20px;
	--text-base-size: 15px;
	--text-base-lh: 24px;
	--mono-xxs-size: 10px;
	--mono-xxs-lh: 16px;
	--mono-xs-size: 12px;
	--mono-xs-lh: 18px;
	--mono-sm-size: 14px;
	--mono-sm-lh: 20px;
	--mono-tracking: 0.05em; /* letterSpacing 5 (%) no Figma */

	/* Layout medido nos frames do Figma */
	--page-max: 1440px;
	--page-margin: var(--spacing-6); /* mobile 375: 24 */
	--header-padding-x: var(--spacing-6); /* mobile: 24 · desktop: 40 */
	--article-column: 976px;
	--sidebar-column: 320px;
	--grid-gap: var(--spacing-6);

	/*
	 * Breakpoints [PROVISÓRIO-TEMA]: o Figma só define 1440 e 375.
	 * 640 = 2 colunas de cards · 1024 = header desktop, 3 colunas, sidebar ao lado.
	 * (CSS custom properties não funcionam em @media; os valores estão repetidos
	 * em layout.css e templates.css.)
	 */
}

@media (min-width: 1024px) {
	:root {
		--page-margin: var(--spacing-12); /* desktop 1440: 48 */
		--header-padding-x: var(--spacing-10); /* desktop: 40 */
	}
}