/* ===================================
   COMMON.CSS - Stili Condivisi
   Versione: 1.0.0
   Progetto: K_CodKilo2
   =================================== */

/* ===================================
    1. CSS VARIABLES - Custom Properties
    Variabili CSS globali utilizzate in tutto il progetto
    =================================== */

:root {
    /* ===== 1.1 COLOR SYSTEM ===== */
    --color-primary: #05F2DB;
    --color-primary-dark: #05C7F2;
    --color-primary-light: #3BE4EB;
    
    /* Secondary Colors */
    --color-secondary: #BA35F2;
    --color-secondary-dark: #7A24A8;
    --color-secondary-light: #D04DFF;
    
    /* Neutral Colors */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;
    
    /* Border Colors - WCAG 1.4.11: Non-text Contrast ≥3:1 */
    --color-border-light: #9CA3AF;      /* gray-400 - contrasto ≥3:1 su bianco */
    --color-border-medium: #6B7280;     /* gray-500 - contrasto ≥4.5:1 su bianco */
    --color-border-dark: #4B5563;       /* gray-600 - contrasto ≥7:1 su bianco */
    
    /* Semantic Colors */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F9FAFB;
    --color-bg-tertiary: #F3F4F6;
    --color-bg-dark: #05050A;
    --color-bg-darker: #0B0B12;
    
    --color-text-primary: #111827;
    --color-text-secondary: #6B7280;
    --color-text-muted: #9CA3AF;
    --color-text-light: #D1D5DB;
    --color-text-white: #FFFFFF;
    
    /* Functional Colors */
    --color-success: #4CAF50;
    --color-success-dark: #388E3C;
    --color-success-light: #66BB6A;
    
    --color-danger: #F20519;
    --color-danger-dark: #C41C3C;
    --color-danger-light: #F87171;
    
    --color-warning: #FFC107;
    --color-warning-dark: #FFA000;
    --color-warning-light: #FFD54F;
    
    --color-info: #00BCD4;
    --color-info-dark: #0097A7;
    --color-info-light: #26C6DA;
    
    /* ===== 1.2 SPACING SYSTEM ===== */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 1rem;       /* 16px */
    --spacing-lg: 1.5rem;     /* 24px */
    --spacing-xl: 2rem;       /* 32px */
    --spacing-2xl: 2.5rem;    /* 40px */
    --spacing-3xl: 3rem;      /* 48px */
    --spacing-4xl: 4rem;      /* 64px */
    --spacing-5xl: 5rem;      /* 80px */
    
    /* ===== 1.3 TYPOGRAPHY SYSTEM ===== */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-heading: 'Roboto', 'Segoe UI', sans-serif;
    
    /* Fluid Typography con clamp() */
    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --font-size-sm: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
    --font-size-base: clamp(1rem, 0.9375rem + 0.05vw, 1.125rem);
    --font-size-lg: clamp(1.125rem, 1.0625rem + 0.08vw, 1.25rem);
    --font-size-xl: clamp(1.25rem, 1.125rem + 0.1vw, 1.5rem);
    --font-size-2xl: clamp(1.5rem, 1.25rem + 0.15vw, 2rem);
    --font-size-3xl: clamp(1.875rem, 1.5rem + 0.25vw, 2.5rem);
    --font-size-4xl: clamp(2.25rem, 1.75rem + 0.35vw, 3.5rem);
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;
    
    /* ===== PACKAGE CARD TYPOGRAPHY ===== */
    --package-card-mobile-title-front: 2rem;
    --package-card-mobile-title-back: 1.3rem;
    --package-card-mobile-microcopy: 0.95rem;
    --package-card-mobile-price-value: 2.2rem;
    --package-card-mobile-price-period: 1rem;
    --package-card-mobile-features: 1rem;
    --package-card-mobile-cta: 1rem;
    --package-card-mobile-badge: 1rem;
    --package-card-mobile-hint: 1rem;
    
    /* ===== 1.4 BORDER RADIUS ===== */
    --radius-none: 0;
    --radius-sm: 0.25rem;    /* 4px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-2xl: 1.5rem;    /* 24px */
    --radius-full: 9999px;
    
    /* ===== 1.5 SHADOWS ===== */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    
    /* Shadow con colore */
    --shadow-primary: 0 4px 12px rgba(5, 242, 219, 0.3);
    --shadow-primary-hover: 0 8px 20px rgba(5, 242, 219, 0.4);
    --shadow-glow: 0 0 20px rgba(5, 242, 219, 0.3);
    
    /* ===== 1.6 TRANSITIONS ===== */
    --transition-instant: 100ms ease;
    --transition-mini: 150ms ease-in-out;
    --transition-micro: 180ms ease-in-out; /* Best Practice #26: ≤200ms per microinterazioni */
    --transition-ultra: 90ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    --transition-slower: 500ms ease-in-out;
    
    /* ===== 1.7 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;
    --z-toast: 1080;
    
    /* ===== 1.8 GRADIENTS ===== */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    --gradient-primary-hover: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary-light));
    --gradient-dark: linear-gradient(135deg, var(--color-bg-dark), var(--color-bg-darker));
    --gradient-light: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-tertiary));
    --gradient-success: linear-gradient(135deg, var(--color-success), var(--color-success-light));
    --gradient-danger: linear-gradient(135deg, var(--color-danger), var(--color-danger-light));
    --gradient-warning: linear-gradient(135deg, var(--color-warning), var(--color-warning-light));
    --gradient-info: linear-gradient(135deg, var(--color-info), var(--color-info-light));
    
    /* ===== 1.9 LAYOUT ===== */
    --container-max-width: 1280px;
    --container-padding: 1.5rem;
    --container-padding-mobile: 1rem;
    
    /* ===== BREAKPOINTS ===== */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* ===================================
    2. RESET & BASE STYLES
    Reset CSS e stili base per garantire coerenza cross-browser
    =================================== */

/* ===== 2.1 UNIVERSAL RESET ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ===== 2.2 HTML & BODY - Elementi radice ===== */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-base);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    min-height: 100vh;
}

/* ===== 2.3 TYPOGRAPHY BASE ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
}

/* Font-size per heading */
h1 {
    font-size: var(--font-size-4xl);
}

h2 {
    font-size: var(--font-size-3xl);
}

h3 {
    font-size: var(--font-size-2xl);
}

h4 {
    font-size: var(--font-size-xl);
}

h5 {
    font-size: var(--font-size-lg);
}

h6 {
    font-size: var(--font-size-base);
}

/* Best Practice #19: Spaziatura adeguata per leggibilità (WCAG 1.4.8) */
p {
    margin-bottom: var(--spacing-xl);
    font-size: var(--font-size-base);
}

/* ===== 2.4 LINKS - Best Practice #26 ===== */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-micro);
}

a:hover {
    color: var(--color-primary-light);
}

a:active {
    color: var(--color-primary-dark);
}

a:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 4px rgba(5, 242, 219, 0.4);
}

/* ===== 2.5 IMAGES ===== */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ===== 2.6 LISTS ===== */
ul, ol {
    list-style: none;
    padding-left: 0;
}

/* Focus visible rimosso globalmente - ora applicato solo a elementi interattivi specifici */
/* Questo evita l'outline su div, span e altri elementi non interattivi */
/* L'accessibilità è mantenuta tramite regole specifiche per link, button, input, ecc. */

/* ===================================
    3. ACCESSIBILITY UTILITIES
    Utilità per l'accessibilità conformi alle WCAG
    =================================== */

/* ===== 3.1 SKIP LINK ===== */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--gradient-primary);
    color: var(--color-text-white);
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    z-index: var(--z-tooltip);
    font-weight: var(--font-weight-semibold);
    transition: top var(--transition-micro);
    border-radius: 0 0 var(--radius-md) 0;
    box-shadow: var(--shadow-md);
}

.skip-link:focus {
    top: 0;
}

.skip-link:hover {
    background: var(--gradient-primary-hover);
}

/* ===== 3.2 SCREEN READER ONLY ===== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== 3.3 VISUALLY HIDDEN ===== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===================================
    4. LAYOUT SYSTEM
    Sistema di layout per container, grid e flexbox
    =================================== */

/* ===== 4.1 CONTAINER ===== */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Varianti del container */
.container--narrow {
    max-width: 800px;
}

.container--wide {
    max-width: 1440px;
}

/* ===== 4.2 GRID SYSTEM ===== */
.grid {
    display: grid;
    gap: var(--spacing-lg);
}

/* Varianti del grid */
.grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Grid responsive */
.grid--auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid--auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ===== 4.3 FLEXBOX UTILITIES ===== */
.flex {
    display: flex;
}

/* Varianti flex */
.flex--column {
    flex-direction: column;
}

.flex--center {
    align-items: center;
    justify-content: center;
}

.flex--between {
    justify-content: space-between;
}

/* Utilità per gap flex */
.flex--gap-sm {
    gap: var(--spacing-sm);
}

.flex--gap-md {
    gap: var(--spacing-md);
}

.flex--gap-lg {
    gap: var(--spacing-lg);
}

/* ===================================
   5. NAVIGATION COMPONENTS
   Sistema di navigazione principale e secondaria
   Include: Header, Navigation Links, e Menu Mobile
   =================================== */

/* ===== 5.1 HEADER ===== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(11, 11, 18, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    z-index: var(--z-sticky);
    transition: var(--transition-micro);
}

.header.scrolled {
    background-color: rgba(11, 11, 18, 0.98);
    box-shadow: var(--shadow-md);
}

/* ===== 5.2 NAVIGATION CONTAINER ===== */
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem var(--container-padding);
    max-width: var(--container-max-width);
    margin: 0 auto;
}

/* ===== 5.3 LOGO ===== */
.nav__logo {
    flex-shrink: 0;
}

.nav__logo-link {
    display: block;
    text-decoration: none;
}

.nav__logo-img {
    height: 60px;
    width: auto;
    transition: var(--transition-micro);
}

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

.nav__logo-img:active {
    transform: scale(0.98);
}

/* Focus state per logo (WCAG 2.4.7) */
.nav__logo-link:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* ===== 5.4 NAVIGATION MENU ===== */
.nav__menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 1rem;
    margin-left: auto;
}

/* ===== 5.5 NAVIGATION LINKS ===== */
.nav__link {
    text-decoration: none;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: var(--font-size-base);
    transition: var(--transition-micro);
    position: relative;
}

/* Pseudo-elemento per effetto underline animato */
.nav__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: var(--transition-micro);
}

.nav__link:hover {
    color: var(--color-primary);
}

.nav__link:hover::after {
    width: 100%;
}

.nav__link:active {
    transform: scale(0.98);
}

/* Focus state per nav link (WCAG 2.4.7) */
.nav__link:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(5, 242, 219, 0.4);
}

/* ===== 5.6 NAVIGATION CTA BUTTON ===== */
.nav__link--cta {
    background: var(--gradient-primary);
    color: var(--color-text-light);
    padding: 0.75rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav__link--cta::after {
    display: none;
}

.nav__link--cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
    color: var(--color-text-light);
}

.nav__link--cta:focus-visible {
    outline: 2px solid var(--color-text-light);
    outline-offset: 4px;
}

.nav__link--cta:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 2px 8px rgba(5, 242, 219, 0.4);
}

.nav__link--cta svg {
    display: block;
    width: 24px;
    height: 24px;
}

/* ===== 5.7 MOBILE MENU TOGGLE ===== */
.nav__toggle {
    display: none;
    flex-direction: column;
    gap: var(--spacing-sm);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: calc(var(--z-sticky) + 1);
    position: relative;
    pointer-events: auto;
}

.nav__toggle span {
    display: block;
    width: 25px;
    height: var(--spacing-xs);
    background-color: var(--color-text-primary);
    border-radius: var(--radius-sm);
    transition: var(--transition-micro);
}

.nav__toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

/* ===== 5.8 MOBILE MENU OVERLAY ===== */
.nav__overlay {
    display: none;
}

/* ===== 5.9 FOCUS TIMED STATE ===== */
.focus-timed {
    outline: 3px solid var(--color-primary) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(5, 242, 219, 0.4) !important;
}

/* ===== 5.10 RESPONSIVE NAVIGATION ===== */
@media (max-width: 768px) {
    .nav__menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background-color: rgba(11, 11, 18, 0.98);
        backdrop-filter: blur(10px);
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding: 6rem 2rem 2rem;
        gap: 1rem;
        box-shadow: var(--shadow-lg);
        transition: transform var(--transition-micro);
        z-index: calc(var(--z-sticky) - 1);
        overflow-y: auto;
        transform: translateX(100%);
        border-left: 1px solid rgba(5, 242, 219, 0.3);
        text-align: right;
    }

    .nav__menu.active {
        transform: translateX(0);
    }

    .nav__overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        z-index: calc(var(--z-sticky) - 2);
        opacity: 0;
        transition: opacity var(--transition-micro);
        pointer-events: none;
    }

    .nav__overlay.active {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    .nav__toggle {
        display: flex;
    }

    .nav__toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    .nav__toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav__toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    .nav__link {
        text-align: right;
    }
}

/* ===================================
   6. BUTTON SYSTEM
   Sistema di pulsanti riutilizzabile con varianti
   Include: Primary, Secondary, Outline, Icon, e varianti di dimensione
   Best Practice #26: Microinterazioni con transizioni ≤200ms
   =================================== */

/* ===== 6.1 BASE BUTTON - Best Practice #26 ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    border-radius: var(--radius-full);
    transition: all var(--transition-micro);
    cursor: pointer;
    border: none;
    font-family: inherit;
    line-height: 1;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Focus states (WCAG 2.4.7) */
.btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(5, 242, 219, 0.4);
}

.btn--primary:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4);
}

.btn--secondary:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(5, 242, 219, 0.4);
}

.btn--success:focus-visible {
    outline: 3px solid var(--color-success);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.4);
}

.btn--danger:focus-visible {
    outline: 3px solid var(--color-danger);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(242, 5, 25, 0.4);
}

.btn--warning:focus-visible {
    outline: 3px solid var(--color-warning);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.4);
}

.btn--info:focus-visible {
    outline: 3px solid var(--color-info);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 188, 212, 0.4);
}

/* ===== 6.2 BUTTON VARIANTS ===== */
.btn--primary {
    background: var(--gradient-primary);
    color: var(--color-text-white);
    box-shadow: var(--shadow-md);
}

.btn--primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary-hover);
}

.btn--primary:active:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn--secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn--secondary:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    transform: translateY(-2px);
}

.btn--secondary:active:not(:disabled) {
    transform: translateY(-1px);
}

.btn--success {
    background: var(--gradient-success);
    color: var(--color-text-white);
}

.btn--success:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn--success:active:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn--danger {
    background: var(--gradient-danger);
    color: var(--color-text-white);
}

.btn--danger:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn--danger:active:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn--warning {
    background: var(--gradient-warning);
    color: var(--color-text-primary);
}

.btn--warning:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn--warning:active:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn--info {
    background: var(--gradient-info);
    color: var(--color-text-white);
}

.btn--info:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn--info:active:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ===== 6.3 BUTTON SIZES ===== */
.btn--sm {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.btn--lg {
    padding: var(--spacing-lg) var(--spacing-2xl);
    font-size: var(--font-size-lg);
}

.btn--full {
    width: 100%;
}

/* ===== 6.4 BUTTON STATES ===== */
.btn:active:not(:disabled) {
    transform: translateY(-1px) scale(0.98);
}

.btn--primary:active:not(:disabled) {
    box-shadow: var(--shadow-sm);
}

/* ===================================
   7. FORM COMPONENTS
   Sistema di componenti per i formulari
   Include: Input fields, Textarea, Select, Checkbox, Radio, e Labels
   Accessibilità: Focus states e ARIA attributes support
   =================================== */

/* ===== 7.1 FORM GROUP ===== */
.form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form__group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* ===== 7.2 FORM LABELS ===== */
.form__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.form__label--required {
    color: var(--color-danger);
    margin-left: 2px;
}

/* ===== 7.3 FORM INPUTS - Best Practice #26: Microinterazioni ===== */
.form__input,
.form__textarea,
.form__select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    font-family: inherit;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-md);
    transition: all var(--transition-micro);
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(5, 242, 219, 0.3);
}

/* Focus-visible con contrasto migliorato (WCAG 2.4.7) */
.form__input:focus-visible,
.form__textarea:focus-visible,
.form__select:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(5, 242, 219, 0.4);
}

.form__input:invalid,
.form__textarea:invalid {
    border-color: var(--color-danger);
}

.form__input::placeholder,
.form__textarea::placeholder {
    color: var(--color-text-muted);
}

.form__input:disabled,
.form__textarea:disabled,
.form__select:disabled {
    background-color: var(--color-gray-100);
    cursor: not-allowed;
}

/* ===== 7.4 FORM TEXTAREA ===== */
.form__textarea {
    resize: vertical;
    min-height: 120px;
}

/* ===== 7.5 FORM ERROR ===== */
.form__error {
    display: block;
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
}

/* ===== 7.6 FORM CHECKBOX ===== */
.form__checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

.form__checkbox input[type="checkbox"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* Focus per checkbox (WCAG 2.4.7) */
.form__checkbox input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(5, 242, 219, 0.4);
}

/* ===== 7.7 FORM STATES ===== */
.form__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

/* ===================================
   8. CARD COMPONENTS
   Sistema di card riutilizzabili per diversi contenuti
   Include: Basic card, Image card, Product card, e varianti
   Best Practice #19: Spaziatura adeguata per leggibilità
   =================================== */

/* ===== 8.1 BASE CARD - Best Practice #26: Microinterazioni ===== */
.card {
    background-color: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-micro);
    border: 1px solid var(--color-border-light);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.card:active {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Focus-within per card (WCAG 2.4.7) */
.card:focus-within {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(5, 242, 219, 0.4);
}

.card--featured:focus-within {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(186, 53, 242, 0.4);
}

/* ===== 8.2 CARD VARIANTS ===== */
.card--featured {
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow-primary);
}

.card--hoverable:hover {
    border-color: var(--color-primary);
}

/* ===== 8.3 CARD SECTIONS ===== */
.card__header {
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-gray-200);
}

.card__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
}

.card__subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: var(--spacing-xs) 0 0 0;
}

.card__body {
    flex: 1;
}

.card__footer {
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-md);
    border-top: 1px solid var(--color-gray-200);
}

/* ===================================
   9. SECTION COMPONENTS
   Sistema di componenti per le sezioni delle pagine
   Include: Section headers, titles, subtitles, e section base styles
   =================================== */

/* ===== 9.1 SECTION BASE ===== */
section {
    padding: var(--spacing-xl) 0;
    /* Ottimizzazione DOM: content-visibility per sezioni below-the-fold */
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

#contatti {
    content-visibility: visible !important;
}

/* ===== 9.2 SECTION HEADER ===== */
.section__header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.section__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    position: relative;
    display: inline-block;
}

.section__title::after {
    content: '';
    display: block;
    width: var(--spacing-5xl);
    height: var(--spacing-xs);
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    margin: var(--spacing-sm) auto 0;
    border-radius: var(--radius-full);
}

.section__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* ===================================
   12. ANIMATIONS
   Keyframes e animazioni riutilizzabili
   Include: Fade, Slide, Scale, Rotate, e Custom animations
   Best Practice #26: Microinterazioni con transizioni ≤200ms
   Accessibilità: Reduced motion support per WCAG 2.3.3
   =================================== */

/* ===== 12.1 FADE ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 12.2 SLIDE ANIMATIONS ===== */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* ===== 12.3 PULSE ANIMATIONS ===== */
@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.1;
        transform: scale(1);
    }
    50% {
        opacity: 0.2;
        transform: scale(1.05);
    }
}

/* ===== 12.4 FLOAT ANIMATIONS ===== */
@keyframes floatParticle {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) rotate(720deg);
        opacity: 0;
    }
}

@keyframes floatLogo {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes floatLogoMobile {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-14px);
    }
}

/* ===== 12.5 GLOW ANIMATIONS ===== */
@keyframes glowLogo {
    0% {
        filter: drop-shadow(0 0 30px rgba(5, 242, 219, 0.5));
    }
    100% {
        filter: drop-shadow(0 0 50px rgba(208, 77, 255, 0.7));
    }
}

/* ===== 12.6 ROTATE ANIMATIONS ===== */
@keyframes rotateRing {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ===== 12.7 BOUNCE ANIMATIONS ===== */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== 12.8 CARD ENTRANCE ANIMATIONS ===== */
@keyframes cardEntrance {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===================================
   13. RESPONSIVE UTILITIES
   Utility classi per design responsive e breakpoints
   Include: Mobile-first approach, Tablet, Desktop, e Large desktop
   Breakpoints: Mobile (<768px), Tablet (768-1023px), Desktop (1024-1439px), Large (≥1440px)
   =================================== */

@media (max-width: 768px) {
    /* ===== 13.1 CONTAINER RESPONSIVE ===== */
    .container {
        padding: 0 var(--container-padding-mobile);
    }
    
    /* ===== 13.2 GRID RESPONSIVE ===== */
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }
    
    .grid--auto-fit,
    .grid--auto-fill {
        grid-template-columns: 1fr;
    }
    
    /* ===== 13.3 FORM RESPONSIVE ===== */
    .form__row {
        grid-template-columns: 1fr;
    }
    
}

@media (max-width: 480px) {
    /* ===== 13.7 BUTTON RESPONSIVE ===== */
    .btn {
        width: 100%;
    }
    
    .btn--sm,
    .btn--lg {
        width: auto;
    }
    
    /* ===== 13.8 MODAL RESPONSIVE ===== */
    .modal__content {
        padding: var(--spacing-md);
    }
    
    /* ===== 13.9 CARD RESPONSIVE ===== */
    .card {
        padding: var(--spacing-md);
    }
}

/* ===================================
   14. ACCESSIBILITY FEATURES
   Feature di accessibilità per supporto utenti con disabilità
   Include: Focus visible, Skip links, Screen reader only, Reduced motion
   Conformità: WCAG 2.2 AA e WCAG 2.3.3 (Reduced Motion)
   =================================== */

/* ===== 14.1 REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    /* Disabilita globalmente animazioni */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Disabilita animazioni specifiche */
    .page-transition,
    .page-transition--active {
        animation: none !important;
        transition: none !important;
    }
    
    /* Disabilita scroll-behavior smooth */
    html {
        scroll-behavior: auto !important;
    }
    
    /* Assicura visibilità senza animazioni */
    .page-transition--active {
        opacity: 1;
    }
}

/* ===== 14.2 HIGH CONTRAST ===== */
@media (prefers-contrast: high) {
    .btn {
        border: 2px solid currentColor;
    }
    
    .card {
        border: 2px solid var(--color-text-primary);
    }
    
    .form__input,
    .form__textarea,
    .form__select {
        border-width: 2px;
    }
}

/* ===================================
   15. PAGE TRANSITIONS - Best Practice #26: Microinterazioni
   Transizioni per cambi di pagina e navigazione
   Include: Page fade-in, Page load, e Navigation transitions
   Best Practice #26: Microinterazioni con transizioni ≤200ms
   =================================== */

.page-transition {
    opacity: 1;
    transition: opacity var(--transition-micro);
    will-change: opacity;
}

.page-transition--active {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .page-transition {
        transition: none;
        will-change: auto;
    }
    
    .page-transition--active {
        opacity: 1;
    }
}

/* ===================================
   16. PRINT STYLES
   Stili specifici per la stampa e l'esportazione PDF
   Include: Nascondi elementi non necessari, Ottimizza layout per stampa
   Best Practice: Leggibilità e risparmio di inchiostro
   =================================== */

@media print {
    /* Nascondi elementi non necessari */
    .skip-link,
    nav,
    footer,
    .btn--secondary,
    .d-none-print {
        display: none !important;
    }
    
    /* Rimuovi sfondi e ombre */
    * {
        background: transparent !important;
        box-shadow: none !important;
        color: black !important;
    }
    
    /* Migliora leggibilità */
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    p, blockquote {
        page-break-inside: avoid;
    }
    
    a {
        text-decoration: underline;
    }
    
    a[href^="http"]::after {
        content: " (" attr(href) ")";
    }
    
    /* Mostra link esplicitamente */
    a[href^="#"]::after {
        content: "";
    }
}

/* ===================================
    17. SPECIAL UTILITIES
    Classi utility speciali per casi d'uso specifici
    =================================== */

/* ===== 17.1 HIDDEN ELEMENTS ===== */
.portfolio--hidden {
    display: none;
}

.svg-sprite {
    display: none;
}