/* Pater Burger - Variables y Estilos Compartidos */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');

/* ===================
   VARIABLES GLOBALES 
====================== */

:root {
    /* Primary Colors */
    --pb-black: #111111;
    --pb-gold: #c9a143;
    --pb-burgundy: #891b1b;
    --pb-cream: #efe6d3;
    --pb-brown: #5c3b1e;
    
    /* Secondary Colors */
    --pb-gold-light: #e3b949;
    --pb-dark-gray: #2c2c2c;
    --pb-dark-red: #6e1313;
    --pb-gold-bright: #ffd700;
    --pb-white: #ffffff;
    
    /* UI Elements */
    --pb-primary: var(--pb-burgundy);
    --pb-secondary: var(--pb-gold);
    --pb-accent: var(--pb-brown);
    --pb-bg-light: var(--pb-cream);
    --pb-bg-dark: var(--pb-black);
    --pb-text-light: var(--pb-cream);
    --pb-text-dark: var(--pb-black);
    
    /* Shadows & Effects */
    --pb-shadow: 0 5px 15px rgba(17, 17, 17, 0.15);
    --pb-shadow-strong: 0 8px 30px rgba(17, 17, 17, 0.25);
    --pb-transition: all 0.3s ease;
    
    /* Layout */
    --admin-sidebar-width: 250px;
    --admin-topbar-height: 60px;
}

/* ===================
   ESTILOS TIPOGRÁFICOS COMPARTIDOS 
====================== */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel', serif;
    font-weight: 700;
}

body {
    font-family: 'EB Garamond', serif;
    color: var(--pb-text-dark);
    line-height: 1.4;
}

.text-primary-brand {
    color: var(--pb-burgundy);
}

.text-secondary-brand {
    color: var(--pb-gold);
}

.text-accent-brand {
    color: var(--pb-brown);
}

/* ===================
   BOTONES COMPARTIDOS
====================== */

.btn-primary {
    background-color: var(--pb-burgundy);
    color: var(--pb-white);
    border-color: var(--pb-burgundy);
    transition: var(--pb-transition);
}

.btn-primary:hover {
    background-color: var(--pb-dark-red);
    border-color: var(--pb-dark-red);
    color: var(--pb-white);
}

.btn-secondary {
    background-color: var(--pb-gold);
    color: var(--pb-black);
    border-color: var(--pb-gold);
    transition: var(--pb-transition);
}

.btn-secondary:hover {
    background-color: var(--pb-gold-light);
    border-color: var(--pb-gold-light);
    color: var(--pb-black);
}

.btn-outline-primary {
    background-color: transparent;
    border: 2px solid var(--pb-burgundy);
    color: var(--pb-burgundy);
    transition: var(--pb-transition);
}

.btn-outline-primary:hover {
    background-color: var(--pb-burgundy);
    color: var(--pb-white);
}

.btn-outline-secondary {
    background-color: transparent;
    border: 2px solid var(--pb-gold);
    color: var(--pb-gold);
    transition: var(--pb-transition);
}

.btn-outline-secondary:hover {
    background-color: var(--pb-gold);
    color: var(--pb-black);
}

/* ===================
   ELEMENTOS DE INTERFAZ COMPARTIDOS
====================== */

.card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--pb-shadow);
    border: none;
    transition: var(--pb-transition);
}

.card:hover {
    box-shadow: var(--pb-shadow-strong);
}

.card-header {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    background-color: var(--pb-bg-light);
    border-bottom: 2px solid var(--pb-gold);
}

.form-control:focus {
    border-color: var(--pb-gold);
    box-shadow: 0 0 0 0.2rem rgba(201, 161, 67, 0.25);
}

/* ===================
   CLASES UTILITARIAS
====================== */

.bg-primary-brand { background-color: var(--pb-burgundy); }
.bg-secondary-brand { background-color: var(--pb-gold); }
.bg-accent-brand { background-color: var(--pb-brown); }
.bg-light-brand { background-color: var(--pb-cream); }
.bg-dark-brand { background-color: var(--pb-black); }

.border-primary-brand { border-color: var(--pb-burgundy); }
.border-secondary-brand { border-color: var(--pb-gold); }
.border-accent-brand { border-color: var(--pb-brown); }

/* Transiciones y efectos */
.hover-scale {
    transition: var(--pb-transition);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.shadow-brand {
    box-shadow: var(--pb-shadow);
}

.shadow-brand-strong {
    box-shadow: var(--pb-shadow-strong);
}