/**
 * CSS Variables - Design Tokens
 * 
 * Cores, espaçamentos e outras variáveis reutilizáveis
 * Baseado em boas práticas de light/dark mode mantendo identidade da marca
 * 
 * ONDE É USADO: Importado por product.css
 */

:root {
	/* Brand Colors - Primary */
	--color-brand-pink: #d9c2bd; /* Primary brand pink/beige */
	--color-brand-dark: #31265b; /* Primary brand dark color */
	--color-brand-white: #ffffff; /* White/off-white base */
	
	/* Cores da Marca - Light Mode (derivadas das cores primárias da marca) */
	/* Rosa principal da marca: #d9c2bd (brand color) */
	--color-pink: #d9c2bd; /* Brand pink/beige */
	--color-pink-light: #e5d1cd; /* Light variation for hovers */
	--color-pink-dark: #c4a8a1; /* Dark variation for pressed states */
	
	/* Cor escura da marca: #31265b (brand color) */
	--color-dark-grey: #31265b; /* Brand dark color */
	--color-grey: #4a3d6b; /* Medium dark variation */
	--color-light-grey: #6a5a8a; /* Light dark variation */
	
	/* Cores de Texto - Light Mode - Based on brand colors */
	--color-text-primary: #31265b; /* Brand dark color for primary text */
	--color-text-secondary: #4a3d6b; /* Medium dark for secondary text */
	--color-text-muted: #6a5a8a; /* Light dark for muted text */
	
	/* Cores de Fundo - Light Mode - Based on brand pink/beige */
	/* More pink/beige - blend of brand pink #d9c2bd with white */
	--color-bg-primary: #f0e8e6; /* More visible pink/beige blend (80% white, 20% brand pink) */
	--color-bg-secondary: #f5f5f5; /* Fundo secundário - cards, modais */
	--color-bg-tertiary: #f0f0f0; /* Fundo terciário - hover states */
	--color-bg-elevated: #ffffff; /* Elementos elevados - apenas quando necessário */
	
	/* Cores de Bordas - Light Mode */
	--color-border-light: #e8e8e8; /* Bordas sutis */
	--color-border-medium: #d0d0d0; /* Bordas médias */
	--color-border-dark: #b0b0b0; /* Bordas fortes */
	
	/* Cores de Botões - Light Mode - Based on brand colors */
	--color-button-primary: #d9c2bd; /* Botão primário - brand pink */
	--color-button-primary-hover: #c4a8a1; /* Hover - darker brand pink */
	--color-button-secondary: #31265b; /* Botão secundário - brand dark */
	--color-button-text: #ffffff; /* Texto em botões */
	
	/* Espaçamentos */
	--spacing-xs: 5px;
	--spacing-sm: 10px;
	--spacing-md: 20px;
	--spacing-lg: 30px;
	--spacing-xl: 40px;
	
	/* Tipografia */
	--font-family-base: 'Nunito', sans-serif;
	--font-family-serif: 'EB Garamond', serif;
	--font-family-akrobat: 'Akrobat Regular', sans-serif;
	
	/* Transições */
	--transition-fast: 0.2s ease;
	--transition-base: 0.3s ease;
	--transition-slow: 0.8s ease;
	
	/* Z-index Layers */
	--z-index-navbar: 9999;
	--z-index-modal-backdrop: 100000;
	--z-index-modal: 100001;
}

/* Dark Mode - Darker tones (not pure black) based on brand colors */
[data-theme="dark"] {
	/* Cores da Marca - Dark Mode (darker tones, not pure black) */
	/* Brand pink: lighter for readability but maintains brand identity */
	--color-pink: #e5d1cd; /* Lighter brand pink for readability */
	--color-pink-light: #f0e4e1; /* Very light brand pink for highlights */
	--color-pink-dark: #c4a8a1; /* Medium brand pink for pressed states */
	
	/* Brand dark: lighter for readability in dark mode */
	--color-dark-grey: #6a5a8a; /* Lighter brand dark for readability */
	--color-grey: #7a6a9a; /* Medium dark variation */
	--color-light-grey: #9a8aaa; /* Light dark variation */
	
	/* Cores de Texto - Dark Mode (lighter for readability) */
	--color-text-primary: #f5f5f5; /* Texto principal - quase branco mas não puro */
	--color-text-secondary: #e0e0e0; /* Texto secundário */
	--color-text-muted: #b0b0b0; /* Texto desabilitado/muted */
	
	/* Cores de Fundo - Dark Mode (darker tones, not pure black) */
	/* Based on brand dark (#31265b) - darker variations */
	--color-bg-primary: #1a1a1a; /* Darker, more neutral tone (not purple-tinted), not pure black */
	--color-bg-secondary: #252525; /* Cards, modais - darker neutral tone */
	--color-bg-tertiary: #2f2f2f; /* Hover states - darker neutral tone */
	--color-bg-elevated: #3a3a3a; /* Elementos elevados - neutral dark */
	
	/* Cores de Bordas - Dark Mode */
	--color-border-light: #333333; /* Bordas sutis */
	--color-border-medium: #444444; /* Bordas médias */
	--color-border-dark: #555555; /* Bordas fortes */
	
	/* Cores de Botões - Dark Mode - Based on brand colors */
	--color-button-primary: #e5d1cd; /* Botão primário - lighter brand pink */
	--color-button-primary-hover: #f0e4e1; /* Hover - very light brand pink */
	--color-button-secondary: #6a5a8a; /* Botão secundário - lighter brand dark */
	--color-button-text: #1a1626; /* Texto em botões - dark background */
	
	/* Cores auxiliares */
	--color-white: #ffffff; /* Branco para contraste */
}

/* Transições suaves para mudança de tema */
* {
	transition: background-color var(--transition-base), 
	            color var(--transition-base),
	            border-color var(--transition-base);
}

/* Evitar transições em elementos que não devem ter (performance) */
*:before,
*:after,
svg,
img {
	transition: none;
}