/* ============================================
   DESIGN TOKENS - Sistema di Design Centralizzato
   Versione: 1.0
   ============================================ */

:root {
    /* === COLORI PRIMARI === */
    --color-primary: #1877F2;
    --color-primary-rgb: 24, 119, 242;
    --color-primary-hover: #1565d8;
    --color-primary-light: rgba(24, 119, 242, 0.1);

    --color-secondary: #000957;
    --color-secondary-rgb: 0, 9, 87;

    --color-accent: #4361ee;
    --color-accent-rgb: 67, 97, 238;
    --color-accent-hover: #3a56d4;
    --color-accent-light: rgba(67, 97, 238, 0.1);

    --color-whatsapp: #25D366;
    --color-whatsapp-hover: #20bd5a;
    --color-whatsapp-light: rgba(37, 211, 102, 0.1);

    /* === COLORI SEMANTICI === */
    --color-success: #10b981;
    --color-success-light: #f0fdf4;
    --color-warning: #f59e0b;
    --color-warning-light: #fff7ed;
    --color-error: #ef4444;
    --color-error-light: #fef2f2;
    --color-info: #3b82f6;
    --color-info-light: #f0f9ff;

    /* === COLORI NEUTRALI === */
    --color-dark: #2c3e50;
    --color-text: #374151;
    --color-text-secondary: #6c757d;
    --color-text-muted: #9ca3af;
    --color-border: #e5e7eb;
    --color-border-light: #f0f0f0;
    --color-bg: #ffffff;
    --color-bg-subtle: #f8f9fa;
    --color-bg-muted: #f4f4f9;
    --color-bg-section: #f8fafc;

    /* === GRADIENTI === */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    --gradient-accent: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    --gradient-hero-overlay: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.4));
    --gradient-whatsapp: linear-gradient(135deg, #25d366, #48db81);

    /* === TIPOGRAFIA === */
    --font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family-heading: 'Montserrat', sans-serif;

    /* Font Size Scale (Major Third - 1.25 ratio) */
    --font-size-xs: 0.8rem;     /* 12.8px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-md: 1.0625rem;  /* 17px - mobile body */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.75rem;   /* 28px */
    --font-size-4xl: 2rem;      /* 32px */
    --font-size-5xl: 2.5rem;    /* 40px */
    --font-size-6xl: 3rem;      /* 48px */

    /* Line Height */
    --line-height-tight: 1.2;
    --line-height-snug: 1.35;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.65;
    --line-height-loose: 1.8;

    /* Font Weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* === SPAZIATURA (Scale 4px base) === */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */

    /* === BORDER RADIUS === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 1rem;    /* 16px */
    --radius-2xl: 20px;
    --radius-pill: 9999px;
    --radius-circle: 50%;

    /* === BOX SHADOW (Elevation Scale) === */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 15px 30px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.2);

    /* Card Shadow (default) */
    --shadow-card: 0 2px 15px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 10px 30px rgba(0, 0, 0, 0.12);

    /* === Z-INDEX SCALE === */
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-overlay: 40;
    --z-modal: 50;
    --z-popover: 60;
    --z-tooltip: 70;
    --z-header: 100;
    --z-progress: 101;
    --z-skip-link: 200;

    /* === TRANSIZIONI === */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-smooth: all 0.3s ease;

    /* === CONTAINER === */
    --container-max: 1200px;
    --container-wide: 1400px;
    --container-narrow: 900px;

    /* === BREAKPOINTS (reference only - CSS can't use vars in media queries) === */
    /* --bp-sm: 480px; */
    /* --bp-md: 768px; */
    /* --bp-lg: 992px; */
    /* --bp-xl: 1200px; */

    /* ============================
       LEGACY ALIASES (backward compatibility)
       Gradual migration path - use new tokens above
       ============================ */
    --primary-color: var(--color-primary);
    --primary-color-rgb: var(--color-primary-rgb);
    --secondary-color: var(--color-secondary);
    --dark-color: var(--color-dark);
    --light-gray: var(--color-bg-muted);
    --whatsapp-color: var(--color-whatsapp);
    --accent-color: var(--color-accent);
    --text-light: var(--color-text-secondary);
    --bg-gradient: var(--gradient-primary);
    --card-shadow: var(--shadow-md);
}