/**
 * GALERIA NOVA - CSS VARIABLES
 * Brand System - Basado en PDF de Branding
 * NO modificar sin consultar Brand System
 */

 :root {
  
    /* ==========================================
       COLORES - BRAND SYSTEM
       ========================================== */
    
    /* Colores Principales */
    --gn-black: #0A0A0A;        /* Negro profundo */
    --gn-white: #FAFAFA;        /* Blanco museo */
    
    /* Color Acento */
    --gn-gold: #D4AF37;         /* Dorado sutil - USO MUY LIMITADO */
    
    /* Colores Secundarios */
    --gn-gray-warm: #E8E8E8;    /* Gris cálido */
    --gn-gray-medium: #6B6B6B;  /* Gris medio */
    
    
    /* ==========================================
       TIPOGRAFÍA
       ========================================== */
    
    /* Familias de fuentes */
    --gn-font-display: 'Playfair Display', serif;
    --gn-font-body: 'Inter', sans-serif;
    
    /* Tamaños - Títulos */
    --gn-h1: 4rem;      /* 64px */
    --gn-h2: 3rem;      /* 48px */
    --gn-h3: 2rem;      /* 32px */
    --gn-h4: 1.5rem;    /* 24px */
    
    /* Tamaños - Cuerpo */
    --gn-body-large: 1.125rem;  /* 18px */
    --gn-body: 1rem;            /* 16px */
    --gn-body-small: 0.875rem;  /* 14px */
    --gn-caption: 0.75rem;      /* 12px */
    
    /* Line Heights */
    --gn-lh-display: 1.2;       /* Títulos */
    --gn-lh-body: 1.6;          /* Cuerpo */
    --gn-lh-tight: 1.4;         /* Navegación */
    
    /* Letter Spacing */
    --gn-ls-display: -0.02em;   /* Títulos Playfair */
    --gn-ls-body: 0;            /* Cuerpo normal */
    --gn-ls-wide: 0.05em;       /* Microtextos */
    
    
    /* ==========================================
       ESPACIADO - SISTEMA DE 8px
       ========================================== */
    
    --gn-space-xs: 0.5rem;    /* 8px */
    --gn-space-sm: 1rem;      /* 16px */
    --gn-space-md: 1.5rem;    /* 24px */
    --gn-space-lg: 3rem;      /* 48px */
    --gn-space-xl: 4.5rem;    /* 72px */
    --gn-space-2xl: 7.5rem;   /* 120px */
    
    
    /* ==========================================
       SOMBRAS
       ========================================== */
    
    --gn-shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.04);
    --gn-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);
    --gn-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
    --gn-shadow-gold: 0 4px 12px rgba(212, 175, 55, 0.15);
    
    
    /* ==========================================
       BORDES
       ========================================== */
    
    --gn-border-width: 1px;
    --gn-border-color: var(--gn-gray-warm);
    --gn-border-dark: var(--gn-black);
    
    /* Border Radius - minimalista */
    --gn-radius-none: 0;
    --gn-radius-subtle: 2px;
    --gn-radius-small: 4px;
    --gn-radius-medium: 8px;
    
    
    /* ==========================================
       TRANSICIONES
       ========================================== */
    
    --gn-transition-fast: 0.2s ease;
    --gn-transition-medium: 0.3s ease;
    --gn-transition-slow: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    
    /* ==========================================
       LAYOUT
       ========================================== */
    
    --gn-max-width: 1200px;
    --gn-padding-desktop: 3rem;    /* 48px */
    --gn-padding-mobile: 1.5rem;   /* 24px */
    
    /* Grid */
    --gn-grid-gap-horizontal: 2rem;    /* 32px */
    --gn-grid-gap-vertical: 3rem;      /* 48px */
  }