/**
 * BBAdria Theme - Design System
 * Variabili CSS globali per colori, tipografia e spaziature
 * 
 * @package BBAdria
 */

:root {
    /* ========== PALETTE COLORI ========== */
    
    /* Colori Primari */
    --color-bg-main: #F9F9F9;           /* Bianco Caldo - Sfondo principale */
    --color-text-main: #333333;         /* Grigio Caldo (Antracite) - Testo principale */
    --color-text-secondary: #004456;    /* Blu Notte Scuro - Testo secondario */
    --color-text-tertiary: #4C583E;     /* Verde Oliva Intenso - Testo terziario */
    
    /* Call to Action */
    --color-cta-primary: #005A70;       /* Blu Notte Caldo - CTA primari (Prenota, Richiedi) */
    --color-cta-primary-hover: #004456; /* Hover CTA primario (più scuro) */
    --color-cta-secondary: #D4A86A;     /* Oro Pallido/Sabbia - CTA secondari */
    --color-cta-secondary-hover: #C09550; /* Hover CTA secondario (più scuro) */
    
    /* Elementi Strutturali */
    --color-structural: #7D5F47;        /* Legno Bruciato - Linee, bordi, footer */
    --color-structural-light: #A58470; /* Legno Bruciato chiaro */
    
    /* Colori Utility */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-grey-light: #E5E5E5;
    --color-grey-medium: #999999;
    --color-grey-dark: #666666;
    --color-cream: #FAF8F5;
    --color-overlay: rgba(0, 0, 0, 0.5);
    --color-overlay-light: rgba(0, 0, 0, 0.3);
    
    /* Alias per retrocompatibilità */
    --color-primary: var(--color-cta-primary);
    --color-secondary: var(--color-cta-secondary);
    --color-success: #28a745;
    
    /* ========== TIPOGRAFIA ========== */
    
    /* Font Families */
    --font-heading: 'Rufina', serif;     /* Font per titoli - elegante serif */
    --font-body: 'Urbanist', sans-serif; /* Font per testo - moderno sans-serif */
    
    /* Font Sizes - Scala Tipografica Armoniosa */
    --font-size-base: 16px;              /* Dimensione base del testo */
    
    /* Titoli */
    --font-size-h1: 100px;                /* Hero title, titoli principali */
    --font-size-h2: 38px;                /* Titoli sezione */
    --font-size-h3: 28px;                /* Sottotitoli importanti */
    --font-size-h4: 22px;                /* Titoli card */
    --font-size-h5: 18px;                /* Titoli minori */
    --font-size-h6: 16px;                /* Piccoli titoli */
    
    /* Testo */
    --font-size-large: 18px;             /* Testo grande (intro, lead) */
    --font-size-normal: 16px;            /* Testo normale */
    --font-size-small: 14px;             /* Testo piccolo (meta info) */
    --font-size-tiny: 12px;              /* Testo molto piccolo */
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;
    
    /* Letter Spacing */
    --letter-spacing-tight: -0.5px;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 1px;
    --letter-spacing-wider: 2px;
    
    /* ========== SPAZIATURE ========== */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 64px;
    --spacing-3xl: 96px;
    
    /* Margini Sezioni */
    --section-margin-mobile: 40px;
    --section-margin-tablet: 50px;
    --section-margin-desktop: 60px;
    
    /* Padding Sezioni (per sezioni con background) */
    --section-padding-mobile: 40px;
    --section-padding-tablet: 50px;
    --section-padding-desktop: 60px;
    
    /* ========== ALTRI ELEMENTI ========== */
    
    /* Border Radius */
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 15px;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --shadow-hover: 0 5px 25px rgba(74, 124, 89, 0.2);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Z-index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ========== RESPONSIVE FONT SIZES ========== */
@media (max-width: 1199px) {
    :root {
        --font-size-h1: 42px;
        --font-size-h2: 34px;
        --font-size-h3: 26px;
    }
}

@media (max-width: 991px) {
    :root {
        --font-size-h1: 36px;
        --font-size-h2: 30px;
        --font-size-h3: 24px;
        --font-size-h4: 20px;
    }
}

@media (max-width: 767px) {
    :root {
        --font-size-h1: 32px;
        --font-size-h2: 28px;
        --font-size-h3: 22px;
        --font-size-h4: 18px;
        --font-size-base: 15px;
    }
}