/**
 * Photo Agency - Variables de Diseño
 * Sistema de diseño con Raleway y paleta dorada
 */

/* Fuentes Raleway */
@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway-extrabold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Variables CSS - Colores Dorados */
:root {
    /* Paleta Dorada */
    --pa-gold-primary: #D4AF37;
    --pa-gold-light: #F4E4C1;
    --pa-gold-dark: #B8941C;
    --pa-gold-metallic: #FFD700;
    --pa-gold-rose: #E8C5A0;
    
    /* Gradientes Dorados */
    --pa-gradient-gold-1: linear-gradient(135deg, #D4AF37 0%, #FFD700 100%);
    --pa-gradient-gold-2: linear-gradient(135deg, #B8941C 0%, #D4AF37 50%, #FFD700 100%);
    --pa-gradient-gold-3: linear-gradient(90deg, #E8C5A0 0%, #D4AF37 100%);
    
    /* Colores Complementarios */
    --pa-charcoal-dark: #1A1A1A;
    --pa-charcoal: #2D2D2D;
    --pa-gray-dark: #4A4A4A;
    --pa-gray-medium: #757575;
    --pa-gray-light: #E0E0E0;
    --pa-white: #FFFFFF;
    --pa-white-off: #F9F9F9;
    
    /* Tipografía */
    --pa-font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Espaciado */
    --pa-spacing-xs: 0.25rem;
    --pa-spacing-sm: 0.5rem;
    --pa-spacing-md: 1rem;
    --pa-spacing-lg: 1.5rem;
    --pa-spacing-xl: 2rem;
    --pa-spacing-2xl: 3rem;
    
    /* Bordes */
    --pa-border-radius-sm: 0.25rem;
    --pa-border-radius-md: 0.5rem;
    --pa-border-radius-lg: 1rem;
    
    /* Sombras */
    --pa-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --pa-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --pa-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --pa-shadow-gold: 0 4px 14px 0 rgba(212, 175, 55, 0.3);
    
    /* Transiciones */
    --pa-transition-fast: 150ms ease-in-out;
    --pa-transition-base: 300ms ease-in-out;
    --pa-transition-slow: 500ms ease-in-out;
}

/* Aplicar fuente Raleway a todos los elementos del plugin */
.photo-agency-plugin,
.photo-agency-plugin *,
[class*="pa-"],
[class*="photo-agency"] {
    font-family: var(--pa-font-family) !important;
}

/* Utilidades de gradiente de texto */
.pa-text-gradient {
    background: var(--pa-gradient-gold-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Botones primarios */
.pa-btn-primary {
    background: var(--pa-gradient-gold-1);
    color: var(--pa-charcoal-dark);
    border: none;
    padding: var(--pa-spacing-md) var(--pa-spacing-xl);
    border-radius: var(--pa-border-radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--pa-transition-base);
    box-shadow: var(--pa-shadow-gold);
}

.pa-btn-primary:hover {
    background: var(--pa-gradient-gold-2);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(212, 175, 55, 0.4);
}

.pa-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.pa-btn-secondary {
    background: var(--pa-white);
    color: var(--pa-charcoal-dark);
    border: 2px solid var(--pa-gold-primary);
    padding: var(--pa-spacing-md) var(--pa-spacing-xl);
    border-radius: var(--pa-border-radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--pa-transition-base);
    text-decoration: none;
    display: inline-block;
}

.pa-btn-secondary:hover {
    background: var(--pa-gold-light);
    border-color: var(--pa-gold-dark);
    transform: translateY(-2px);
    box-shadow: var(--pa-shadow-md);
}

.pa-btn-secondary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Inputs con borde dorado en focus */
.pa-input {
    border: 2px solid var(--pa-gray-light);
    border-radius: var(--pa-border-radius-md);
    padding: var(--pa-spacing-md);
    font-family: var(--pa-font-family);
    transition: border-color var(--pa-transition-base);
}

.pa-input:focus {
    outline: none;
    border-color: var(--pa-gold-primary);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

/* Cards destacados */
.pa-card {
    border: 2px solid var(--pa-gold-primary);
    border-radius: var(--pa-border-radius-lg);
    padding: var(--pa-spacing-lg);
    background: var(--pa-white);
    box-shadow: var(--pa-shadow-gold);
}