/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~ ASSETS/CSS/00-DESIGN-SYSTEM.CSS (v3.1 - Premium Tech)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

:root {
    /*--------------------------------------------------------------
    # 1. COLOR PALETTE
    --------------------------------------------------------------*/
    /* Primary Action Color (Apple Blue) */
    --bpc-blue-primary: #0071e3;
    --bpc-blue-hover: #0077ed;

    /* Accent & Status Colors */
    --bpc-green-accent: #34c759;
    --bpc-green-hover: #2fa94e;
    --bpc-red-error: #ff3b30;

    /* Neutral & Text Colors (Gerarchia Chiara - Apple) */
    --bpc-text-primary: #1d1d1f;      /* Titoli, testo importante */
    --bpc-text-secondary: #515154;    /* Testo secondario, descrizioni */
    --bpc-text-tertiary: #86868b;      /* Didascalie, placeholder, meta */
    --bpc-text-disabled: #a1a1a6;

    /* Background & Surface Colors */
    --bpc-bg-primary: #ffffff;
    --bpc-bg-secondary: #f5f5f7;      /* Sfondo sezioni (Apple light gray) */
    --bpc-bg-tertiary: #e8e8ed;       /* Sfondo per hover leggeri */
    --bpc-bg-overlay: rgba(0, 0, 0, 0.5); /* Overlay per modali */

    /* Border Colors */
    --bpc-border-primary: #d2d2d7;
    --bpc-border-secondary: #e5e5ea;  /* Bordo più leggero */
    --bpc-border-focus: var(--bpc-blue-primary);

    /* Glassmorphism Effect */
    --bpc-glass-bg: rgba(251, 251, 253, 0.8);
    --bpc-glass-blur: 15px;

    /*--------------------------------------------------------------
    # 2. TYPOGRAPHY & SPACING
    --------------------------------------------------------------*/
    /* Font Family */
    --bpc-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --bpc-font-family-mono: 'SF Mono', 'Menlo', 'Consolas', monospace;

    /* Font Sizes (Responsive) */
    --bpc-font-size-xs: clamp(0.75rem, 1.5vw + 0.5rem, 0.875rem); /* 12-14px */
    --bpc-font-size-sm: clamp(0.875rem, 1.5vw + 0.6rem, 1rem);     /* 14-16px */
    --bpc-font-size-md: clamp(1rem, 2vw + 0.7rem, 1.125rem);       /* 16-18px */
    --bpc-font-size-lg: clamp(1.25rem, 2.5vw + 0.8rem, 1.75rem);   /* 20-28px */
    --bpc-font-size-xl: clamp(1.75rem, 4vw + 1rem, 2.75rem);       /* 28-44px */
    --bpc-font-size-xxl: clamp(2.25rem, 6vw + 1.2rem, 4rem);      /* 36-64px */

    /* Font Weights */
    --bpc-font-weight-regular: 400;
    --bpc-font-weight-medium: 500;
    --bpc-font-weight-semibold: 600;
    --bpc-font-weight-bold: 700;

    /* Line Heights */
    --bpc-line-height-tight: 1.25;
    --bpc-line-height-normal: 1.6;
    --bpc-line-height-loose: 1.8;

    /* Spacing Scale (4px grid) */
    --spacing-xxs: 4px; --spacing-xs: 8px; --spacing-sm: 12px;
    --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px;
    --spacing-xxl: 48px; --spacing-xxxl: 64px; --spacing-xxxxl: 96px;

    /* Layout Widths */
    --bpc-content-width: 1080px;
    --bpc-content-width-wide: 1240px;

    /* Header Heights */
    --header-height-desktop: 65px;
    --header-height-mobile: 60px;

    /*--------------------------------------------------------------
    # 3. BORDERS & SHADOWS
    --------------------------------------------------------------*/
    /* Border Radius (morbidi e moderni) */
    --bpc-radius-sm: 6px;
    --bpc-radius-md: 12px;
    --bpc-radius-lg: 18px;
    --bpc-radius-full: 9999px;

    /* Box Shadows (sottili e realistici) */
    --bpc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --bpc-shadow-md: 0 5px 15px rgba(0, 0, 0, 0.07);
    --bpc-shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.1);
    --bpc-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.2);

    /*--------------------------------------------------------------
    # 4. TRANSITIONS & Z-INDEX
    --------------------------------------------------------------*/
    --bpc-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --bpc-transition-normal: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    --z-index-base: 1; --z-index-sticky: 100; --z-index-header: 1000;
    --z-index-offcanvas: 1100; --z-index-modal-backdrop: 1200; --z-index-modal: 1300;
}

/*--------------------------------------------------------------
# GLOBAL STYLES & RESETS
--------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--bpc-font-size-base); scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body {
    font-family: var(--bpc-font-family-sans); font-size: var(--bpc-font-size-md);
    line-height: var(--bpc-line-height-normal); color: var(--bpc-text-secondary);
    background-color: var(--bpc-bg-primary); -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; margin: 0;
}
body.no-scroll { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
    color: var(--bpc-text-primary); font-weight: var(--bpc-font-weight-semibold);
    line-height: var(--bpc-line-height-tight); margin: var(--spacing-lg) 0 var(--spacing-md);
}
h1 { font-size: var(--bpc-font-size-xxl); font-weight: var(--bpc-font-weight-bold); }
h2 { font-size: var(--bpc-font-size-xl); }
h3 { font-size: var(--bpc-font-size-lg); }
h4 { font-size: var(--bpc-font-size-md); font-weight: var(--bpc-font-weight-bold); }

p { margin: 0 0 var(--spacing-md); max-width: 65ch; } /* Limita larghezza per leggibilità */
p:last-child { margin-bottom: 0; }