/**
 * CSS VARIABLES - BRAND SYSTEM: EMBER & IRON
 * Configurado para máximo rendimiento y estilo 'Quiet Luxury'
 */

 :root {
  /* COLORES BASE - Branding Ember & Iron */
  --color-primary: #000D0D;    /* Negro profundo con matiz frío */
  --color-secondary: #F5F5F5;  /* Blanco roto para evitar fatiga visual */
  --color-accent: #B87333;     /* Cobre/Copper corporativo */
  --color-gray-light: #1A1A1A; /* Gris muy oscuro para fondos secundarios */
  --color-gray-medium: #8C8C8C; /* Gris neutro para textos secundarios */
  
  /* TIPOGRAFÍA - Luxury Stack */
  --font-display: 'Cormorant Garamond', serif; /* Elegancia pura para títulos */
  --font-body: 'DM Sans', sans-serif;          /* Legibilidad premium para cuerpo */
  
  /* TAMAÑOS - Escala visual equilibrada */
  --h1: clamp(3rem, 8vw, 5rem); /* Responsive fluido */
  --h2: clamp(2.5rem, 6vw, 3.5rem);
  --h3: 2.25rem;
  --h4: 1.5rem;
  --body: 1.125rem; /* Un pelín más grande para aire premium */
  --small: 0.875rem;
  
  /* ESPACIADO - Sistema basado en 8px */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-2xl: 120px;
  --space-3xl: 160px;
  
  /* TRANSICIONES - Suaves para sensación de lujo */
  --transition-fast: 0.15s ease-out;
  --transition-medium: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  
  /* BORDES - Minimalismo absoluto */
  --border-width: 1px;
  --border-radius: 0px; /* Esquinas rectas = más seriedad/lujo */
  
  /* SOMBRAS - Muy sutiles o inexistentes en modo oscuro */
  --shadow-subtle: 0 4px 20px rgba(0,0,0,0.5);
  --shadow-card: 0 10px 30px rgba(0,0,0,0.8);
}