/* ==========================================================================
   Clube SMK — Design Tokens
   Modelo híbrido: :root = superfície CLARA. .is-dark reescreve as variáveis
   de superfície para as seções ESCURAS (hero, banners, rodapé).
   ========================================================================== */

:root {
	/* ----- Marca ----- */
	/* Marca: laranja #fe5c00 (nomes --c-purple* mantidos por compatibilidade) */
	--c-purple: #fe5c00;
	--c-purple-600: #e85100;
	--c-purple-700: #c44600;
	--c-purple-050: #fff2e9;
	--c-purple-100: #ffd9bf;
	--c-black: #000000;
	--c-white: #ffffff;

	/* ----- Superfície clara (header + catálogo) ----- */
	--bg: #ffffff;
	--bg-soft: #f7f6fa;
	--bg-muted: #efedf3;
	--surface: #ffffff;
	--text: #15131a;
	--text-soft: #5b5666;
	--text-faint: #8c8796;
	--border: #e7e4ee;
	--border-strong: #d6d2e0;

	/* ----- Tokens contextuais (recalculados em .is-dark) ----- */
	--link: var(--c-purple);
	--link-hover: var(--c-purple-700);
	--on-accent: #ffffff;

	/* ----- Feedback ----- */
	--success: #1f9d55;
	--success-bg: #e7f7ee;
	--error: #e02424;
	--error-bg: #fdeaea;
	--warn: #b7791f;
	--warn-bg: #fdf6e3;
	--info: var(--c-purple);

	/* ----- Tipografia ----- */
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--font-body: var(--font-sans);
	--font-display: 'Sora', var(--font-sans);

	--fs-11: 0.6875rem;
	--fs-12: 0.75rem;
	--fs-13: 0.8125rem;
	--fs-14: 0.875rem;
	--fs-16: 1rem;
	--fs-18: 1.125rem;
	--fs-20: 1.25rem;
	--fs-24: 1.5rem;
	--fs-28: 1.75rem;
	--fs-32: 2rem;
	--fs-40: 2.5rem;
	--fs-48: 3rem;
	--fs-56: clamp(2.25rem, 5vw, 3.5rem);

	--lh-tight: 1.15;
	--lh-snug: 1.3;
	--lh: 1.55;

	--fw-reg: 400;
	--fw-med: 500;
	--fw-semi: 600;
	--fw-bold: 700;

	/* ----- Espaçamento (base 4px) ----- */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.25rem;
	--s-6: 1.5rem;
	--s-7: 1.75rem;
	--s-8: 2rem;
	--s-10: 2.5rem;
	--s-12: 3rem;
	--s-14: 3.5rem;
	--s-16: 4rem;
	--s-20: 5rem;
	--s-24: 6rem;

	/* ----- Raios ----- */
	--r-xs: 4px;
	--r-sm: 8px;
	--r: 12px;
	--r-lg: 18px;
	--r-xl: 26px;
	--r-pill: 999px;
	--r-circle: 50%;

	/* ----- Sombras ----- */
	--sh-1: 0 1px 2px rgba(20, 16, 30, 0.06), 0 1px 3px rgba(20, 16, 30, 0.04);
	--sh-2: 0 6px 24px rgba(20, 16, 30, 0.10);
	--sh-3: 0 12px 40px rgba(20, 16, 30, 0.14);
	--sh-pop: 0 24px 60px rgba(20, 16, 30, 0.20);
	--sh-purple: 0 10px 30px rgba(254, 92, 0, 0.30);

	/* ----- Layout ----- */
	--container: 1280px;
	--container-wide: 1480px;
	--container-narrow: 880px;
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--header-h: 80px;
	--topbar-h: 38px;
	/* Altura total do header fixo (topbar + barra + nav) + folga — usado por colunas sticky */
	--sticky-offset: 188px;

	/* ----- Movimento ----- */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--t-fast: 0.15s;
	--t: 0.25s;
	--t-slow: 0.4s;

	/* ----- Z-index ----- */
	--z-header: 100;
	--z-megamenu: 110;
	--z-drawer: 200;
	--z-modal: 300;
	--z-toast: 400;
}

/* Seções escuras: aplicar .is-dark no wrapper. Os componentes leem var(--bg)/var(--text). */
.is-dark {
	--bg: #0c0a12;
	--bg-soft: #151221;
	--bg-muted: #1d1830;
	--surface: #151221;
	--text: #f5f3fa;
	--text-soft: #b7b1c6;
	--text-faint: #8b8499;
	--border: #2a2436;
	--border-strong: #3a3248;
	--link: #ff8b4d;
	--link-hover: #ffa770;

	color: var(--text);
	background-color: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--t-fast: 0.001s;
		--t: 0.001s;
		--t-slow: 0.001s;
	}
}