/**
 * Fogli di Stile Variabili CSS (Design System Tokens)
 *
 * @package SistemiPerDormire
 */

:root {
    /* ----------------------------------------------------
       TAVOLOZZA COLORI (Premium Wellness & Made in Italy)
       ---------------------------------------------------- */
    /* Colore Dominante / Sfondi */
    --color-bg-pure: #ffffff;
    --color-bg-soft: #fcfaf6;       /* Warm Beige: Sfondi morbidi e caldi */
    --color-bg-cloud: #f4f7fa;      /* Light Blue-Grey: Nuvola rilassante */
    
    /* Colore Primario (Night Blue) */
    --color-primary: #0a1128;       /* Blu Notte Profondo: Trasmette fiducia e qualità */
    --color-primary-light: #1c2b57;
    
    /* Colori Accento */
    --color-accent-gold: #c5a880;   /* Oro Tenue: Dettagli premium ed eleganza */
    --color-accent-gold-dark: #b59569;
    --color-accent-blue: #1b3b6f;   /* Blu Notte Intermedio */
    
    /* Testi */
    --color-text-dark: #1e2530;     /* Grigio Elegante/Antracite molto scuro */
    --color-text-muted: #626e82;    /* Grigio Elegante di lettura secondaria */
    
    /* Bordi e Elementi */
    --color-border-light: #e8ecf2;
    --color-border-medium: #cbd5e1;
    --color-white: #ffffff;

    /* Colori di Stato (Feedback ed Input Validation) */
    --color-success: #2e8b57;       /* Verde foresta morbido */
    --color-warning: #c58f00;       /* Giallo oro scuro */
    --color-error: #d94f4f;         /* Rosso corallo tenue */
    --color-info: #1b3b6f;          /* Blu zaffiro rilassante */

    /* Configurazione Header e Accessibilità */
    --color-header-bg: rgba(255, 255, 255, 0.85);
    --color-header-bg-scrolled: rgba(255, 255, 255, 0.95);
    --color-focus: var(--color-accent-gold);
    
    /* Sfumature (Gradients) */
    --gradient-cloud: linear-gradient(135deg, #ffffff 0%, #fcfaf6 50%, #f4f7fa 100%);
    --gradient-premium: linear-gradient(135deg, #0a1128 0%, #1c2b57 100%);
    --gradient-gold: linear-gradient(135deg, #c5a880 0%, #ecdcb9 100%);

    /* ----------------------------------------------------
       TIPOGRAFIA (Pairing: Playfair Display + Inter)
       ---------------------------------------------------- */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    /* Scala Tipografica Standardizzata */
    --text-display-xl: clamp(3rem, 2.5rem + 2.5vw, 5.5rem);
    --text-display-l: clamp(2.25rem, 1.9rem + 1.8vw, 4.25rem);
    --text-h1: clamp(2rem, 1.7rem + 1.5vw, 3.25rem);
    --text-h2: clamp(1.625rem, 1.45rem + 1vw, 2.5rem);
    --text-h3: clamp(1.25rem, 1.15rem + 0.6vw, 1.75rem);
    --text-h4: clamp(1.1rem, 1.05rem + 0.3vw, 1.35rem);
    --text-lead: clamp(1.05rem, 1rem + 0.2vw, 1.25rem);
    --text-body: 1rem;
    --text-small: 0.875rem;
    --text-caption: 0.75rem;

    /* Scale dimensionali testi storiche (Per retrocompatibilità dei layout esistenti) */
    --text-xs: clamp(0.75rem, 0.72rem + 0.16vw, 0.85rem);
    --text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
    --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.05rem);
    --text-md: clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem);
    --text-lg: clamp(1.25rem, 1.18rem + 0.35vw, 1.45rem);
    --text-xl: clamp(1.5rem, 1.38rem + 0.61vw, 1.85rem);
    --text-xxl: clamp(2rem, 1.78rem + 1.1vw, 2.75rem);
    --text-display: clamp(2.5rem, 2.1rem + 2vw, 4.25rem);

    /* ----------------------------------------------------
       SPAZIATURE E LAYOUT
       ---------------------------------------------------- */
    /* Nuova Scala Spaziature Standardizzate */
    --space-xs: 0.25rem;    /* 4px */
    --space-s: 0.5rem;     /* 8px */
    --space-m: 1rem;       /* 16px */
    --space-l: 1.5rem;     /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-xxl: 3rem;     /* 48px */
    --space-xxxl: 6rem;    /* 96px */
    
    /* Variabili storiche (Mantenute per evitare regressioni sui paddings) */
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    
    --container-max-width: 1200px;
    --container-padding: clamp(1rem, 5vw, 2.5rem);
    
    /* ----------------------------------------------------
       FORME E OMBRE (Effetti Morbidi & Nuvola)
       ---------------------------------------------------- */
    --radius-small: 8px;
    --radius-medium: 16px;
    --radius-large: 24px;
    --radius-xl: 32px;
    --radius-pill: 9999px;

    /* Nuova Scala Ombre Standardizzate (Sprint 16.1 Refinement - 50% lighter) */
    --shadow-xs: 0 2px 8px rgba(10, 17, 40, 0.01);
    --shadow-s: 0 4px 16px rgba(10, 17, 40, 0.02);
    --shadow-m: 0 8px 24px rgba(10, 17, 40, 0.03);
    --shadow-l: 0 16px 36px rgba(10, 17, 40, 0.04);
    --shadow-cloud: 0 20px 50px rgba(10, 17, 40, 0.03);

    /* Variabili storiche */
    --shadow-cloud-subtle: 0 8px 30px rgba(10, 17, 40, 0.01);
    --shadow-cloud-medium: 0 12px 36px rgba(10, 17, 40, 0.02);
    --shadow-cloud-large: 0 20px 50px rgba(10, 17, 40, 0.03);

    /* Transizioni e Micro-animazioni */
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: all 0.2s ease-out;
    --anim-duration-slow: 0.6s;
    --anim-duration-medium: 0.4s;
    --anim-duration-fast: 0.2s;
    --anim-easing: cubic-bezier(0.16, 1, 0.3, 1);
}