/* ============================================================
 * Bela Produções — tokens.css
 *
 * Variáveis CSS de marca. Não duplicar valores em outros arquivos
 * — sempre referenciar via var(--bela-*).
 *
 * Fonte canônica: docs/brand/BELA_BRAND_TOKENS.md.
 * Proporção alvo: 70% claro / 20% roxo+lilás / 7% azul / 3% acentos.
 * ============================================================ */

:root {
	/* Paleta — núcleo */
	--bela-roxo:          #6D28D9;
	--bela-roxo-escuro:   #4C1D95;
	--bela-lilas:         #EDE9FE;

	/* Apoio */
	--bela-azul:          #2563EB;
	--bela-azul-suave:    #DBEAFE;

	/* Acentos (uso pontual) */
	--bela-laranja:       #F97316;
	--bela-amarelo:       #FACC15;
	--bela-dourado:       #D4AF37; /* APENAS Golden/Especial */

	/* Neutros */
	--bela-fundo:         #FAFAFF;
	--bela-texto:         #1F2937;
	--bela-texto-suave:   #6B7280;
	--bela-borda:         #E5E7EB;
	--bela-branco:        #FFFFFF;

	/* Tipografia */
	--bela-font-ui:       'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--bela-font-display:  'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Escala de tamanho de texto */
	--bela-text-xs:   12px;
	--bela-text-sm:   14px;
	--bela-text-base: 16px;
	--bela-text-lg:   18px;
	--bela-text-xl:   22px;
	--bela-text-2xl:  28px;
	--bela-text-3xl:  36px;
	--bela-text-4xl:  48px;
	--bela-text-5xl:  64px;

	/* Espaçamento */
	--bela-space-1:   4px;
	--bela-space-2:   8px;
	--bela-space-3:   12px;
	--bela-space-4:   16px;
	--bela-space-5:   24px;
	--bela-space-6:   32px;
	--bela-space-7:   48px;
	--bela-space-8:   64px;
	--bela-space-9:   96px;

	/* Cantos */
	--bela-radius-sm:  8px;
	--bela-radius-md: 12px;
	--bela-radius-lg: 16px;
	--bela-radius-xl: 24px;

	/* Sombra */
	--bela-shadow-sm: 0 1px 2px rgba(31, 41, 55, 0.06);
	--bela-shadow-md: 0 6px 16px rgba(76, 29, 149, 0.10);
	--bela-shadow-lg: 0 20px 30px rgba(76, 29, 149, 0.18);

	/* Containers */
	--bela-container:        1200px;
	--bela-container-narrow: 760px;

	/* Motion */
	--bela-ease:     cubic-bezier(0.4, 0, 0.2, 1);
	--bela-dur-fast: 0.15s;
	--bela-dur-mid:  0.3s;
	--bela-dur-slow: 0.6s;
}

/* Reset mínimo — não substituir por reset pesado */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bela-fundo);
	color: var(--bela-texto);
	font-family: var(--bela-font-ui);
	font-size: var(--bela-text-base);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg {
	max-width: 100%;
	display: block;
}

a {
	color: var(--bela-roxo);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--bela-roxo-escuro);
	text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--bela-roxo);
	outline-offset: 2px;
	border-radius: 4px;
}

/* prefers-reduced-motion — obrigatório */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}