/* ============================================
   CONFIGURACION DE COLORES Y TIPOGRAFIA
   ============================================

   Este archivo contiene todas las variables de diseño.
   Modifica estos valores para cambiar la paleta de colores
   y tipografías de todo el sitio.

   ============================================ */

:root {
  /* ========================================
     COLORES PRINCIPALES
     ======================================== */

  /* Fondo principal del sitio */
  --color-background: #0a0a0a;

  /* Color de texto principal (blanco/claro) */
  --color-text-primary: #ffffff;

  /* Color de texto secundario (gris claro) */
  --color-text-secondary: #a2a2a2;

  /* Color de texto terciario (gris medio) */
  --color-text-tertiary: #767676;

  /* ========================================
     COLORES DE ACENTO (MARCA)
     ======================================== */

  /* Color principal de acento - usado en gradientes, hover, botones */
  --color-accent-primary: #8B4513;  /* Marrón whisky */

  /* Color secundario de acento */
  --color-accent-secondary: #D4AF37;  /* Dorado champagne */

  /* Color terciario (para gradientes y detalles) */
  --color-accent-tertiary: #722F37;  /* Rojo vino */

  /* ========================================
     COLORES DE GRADIENTES
     ======================================== */

  /* Gradiente radial para loading y efectos de fondo */
  --gradient-radial-start: rgba(139, 69, 19, 0.8);  /* Marrón con opacidad */
  --gradient-radial-mid: rgba(114, 47, 55, 0.5);    /* Vino con opacidad */
  --gradient-radial-end: rgba(0, 0, 0, 0);          /* Transparente */

  /* ========================================
     COLORES DE UI
     ======================================== */

  /* Bordes */
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-hover: rgba(255, 255, 255, 0.3);

  /* Overlays */
  --color-overlay: rgba(0, 0, 0, 0.7);
  --color-overlay-light: rgba(0, 0, 0, 0.5);

  /* Botones */
  --color-button-bg: transparent;
  --color-button-text: var(--color-text-primary);
  --color-button-border: var(--color-text-primary);
  --color-button-hover-bg: var(--color-text-primary);
  --color-button-hover-text: var(--color-background);

  /* Cards/Secciones */
  --color-card-bg: rgba(255, 255, 255, 0.03);
  --color-card-bg-hover: rgba(255, 255, 255, 0.05);

  /* ========================================
     TIPOGRAFIA
     ======================================== */

  /* Fuente principal (para titulos y branding) */
  --font-primary: 'Playfair Display', Georgia, serif;

  /* Fuente secundaria (para cuerpo de texto) */
  --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fuente monoespaciada (para detalles tecnicos, precios) */
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* ========================================
     TAMAÑOS DE FUENTE
     ======================================== */

  /* Titulos hero (muy grandes) */
  --font-size-hero: clamp(3rem, 12vw, 10rem);

  /* Titulos de seccion */
  --font-size-section-title: clamp(2rem, 6vw, 4.5rem);

  /* Subtitulos */
  --font-size-subtitle: clamp(1.2rem, 3vw, 2rem);

  /* Texto de cuerpo grande */
  --font-size-body-lg: clamp(1rem, 1.5vw, 1.25rem);

  /* Texto de cuerpo normal */
  --font-size-body: clamp(0.875rem, 1.2vw, 1rem);

  /* Texto pequeño */
  --font-size-small: clamp(0.75rem, 1vw, 0.875rem);

  /* ========================================
     ESPACIADO
     ======================================== */

  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 8rem;
  --spacing-2xl: 12rem;

  /* ========================================
     TRANSICIONES Y ANIMACIONES
     ======================================== */

  /* Duraciones */
  --transition-fast: 0.2s;
  --transition-normal: 0.4s;
  --transition-slow: 0.6s;
  --transition-very-slow: 1s;

  /* Easings */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.76, 0, 0.24, 1);

  /* ========================================
     BORDES Y SOMBRAS
     ======================================== */

  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-full: 50%;

  /* ========================================
     BREAKPOINTS (para referencia en JS)
     ======================================== */

  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;
}

/* ============================================
   TEMAS ALTERNATIVOS
   ============================================

   Descomenta uno de estos bloques para cambiar
   rápidamente la paleta de colores

   ============================================ */

/* TEMA: NOCHE DE JAZZ (Azules profundos)
:root {
  --color-background: #0d1117;
  --color-accent-primary: #1e3a5f;
  --color-accent-secondary: #4a90d9;
  --color-accent-tertiary: #2d5a87;
}
*/

/* TEMA: LOUNGE TROPICAL (Verdes y dorados)
:root {
  --color-background: #0a0f0a;
  --color-accent-primary: #2d5a3d;
  --color-accent-secondary: #c9a227;
  --color-accent-tertiary: #1a3d2a;
}
*/

/* TEMA: SPEAKEASY (Rojos y cobres)
:root {
  --color-background: #0f0808;
  --color-accent-primary: #8b2500;
  --color-accent-secondary: #cd7f32;
  --color-accent-tertiary: #5c1a1a;
}
*/

/* TEMA: MIDNIGHT LUXE (Purpuras y oros)
:root {
  --color-background: #0d0a10;
  --color-accent-primary: #4a1c6b;
  --color-accent-secondary: #d4af37;
  --color-accent-tertiary: #2d1040;
}
*/