/* ==========================================================================
   AC DC CASA — TOKENS DE DESIGN (v2.0 - Luxo Minimalista)
   Paleta exclusiva: Preto, Branco e Cinza
   Tipografia editorial, espaçamento generoso, minimalismo puro
   ========================================================================== */

:root {
	/* ---- Cores Primárias (Luxo Minimalista) ---- */
	--black: #000000;
	--black-soft: #0f0f0f;
	--charcoal: #1a1a1a;
	--dark-gray: #2d2d2d;
	--gray: #4a4a4a;
	--gray-medium: #6b6b6b;
	--gray-light: #8f8f8f;
	--silver: #b8b8b8;
	--light-gray: #d4d4d4;
	--off-white: #e8e8e8;
	--white: #ffffff;

	/* ---- Cores de Acentuação (Muito Sutis) ---- */
	--accent-dark: #1a1a1a;
	--accent-light: #d4d4d4;

	/* ---- Tipografia Editorial ---- */
	--font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
	--font-mono: 'IBM Plex Mono', 'Courier New', monospace;

	/* ---- Escala de Tamanho (Tipografia Editorial) ---- */
	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-md: 1.125rem;
	--fs-lg: 1.5rem;
	--fs-xl: clamp(2rem, 1.5rem + 2vw, 3rem);
	--fs-2xl: clamp(2.5rem, 1.5rem + 4vw, 4rem);
	--fs-3xl: clamp(3rem, 1rem + 7vw, 5.5rem);

	/* ---- Pesos de Fonte ---- */
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-black: 800;

	/* ---- Espaçamento Generoso (Luxo) ---- */
	--space-2xs: 0.5rem;
	--space-xs: 1rem;
	--space-sm: 1.5rem;
	--space-md: 2.5rem;
	--space-lg: 4rem;
	--space-xl: 6rem;
	--space-2xl: 8rem;

	/* ---- Layout ---- */
	--container-width: 1400px;
	--container-pad: 2rem;

	/* ---- Linhas e Divisores ---- */
	--line-color: rgba(0, 0, 0, 0.08);
	--line-color-medium: rgba(0, 0, 0, 0.12);
	--line-color-strong: rgba(0, 0, 0, 0.2);

	/* ---- Movimento (Transições Suaves) ---- */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast: 0.2s;
	--dur-base: 0.4s;
	--dur-slow: 0.8s;
	--dur-slower: 1.2s;

	/* ---- Camadas (Z-index) ---- */
	--z-header: 100;
	--z-overlay: 200;
	--z-drawer: 210;
	--z-modal: 300;
	--z-popup: 320;

	/* ---- Sombras Sutis (Luxo) ---- */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
	--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
	--shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.2);

	/* ---- Raio de Borda (Minimalista) ---- */
	--radius-none: 0;
	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
}

/* ---- Responsividade ---- */
@media (max-width: 768px) {
	:root {
		--container-pad: 1.5rem;
		--space-lg: 3rem;
		--space-xl: 4rem;
		--space-2xl: 5rem;
		--fs-xl: clamp(1.5rem, 1rem + 2vw, 2.5rem);
		--fs-2xl: clamp(2rem, 1rem + 3vw, 3rem);
	}
}

/* ---- Respeita Preferências do Sistema ---- */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0.01ms;
		--dur-base: 0.01ms;
		--dur-slow: 0.01ms;
		--dur-slower: 0.01ms;
	}
}
