/**
 * CSS Variables per ArteSistema Gestionale
 * ----------------------------------------
 * Definisce tutte le variabili CSS per mantenere coerenza
 * basate sui colori e spacing di WordPress admin
 */

:root {
    /* ===== COLORI PRIMARI ===== */
    --as-primary: #0073aa;
    --as-primary-hover: #005a87;
    --as-primary-light: #e5f3ff;
    --as-secondary: #23282d;
    --as-secondary-hover: #191e23;
    --as-secondary-light: #f1f1f1;
    
    /* ===== COLORI STATO ===== */
    --as-success: #46b450;
    --as-success-hover: #3ea943;
    --as-success-light: #e8f5e8;
    --as-danger: #dc3232;
    --as-danger-hover: #c92c2c;
    --as-danger-light: #ffeaea;
    --as-warning: #ffb900;
    --as-warning-hover: #e6a600;
    --as-warning-light: #fff8e1;
    --as-info: #00a0d2;
    --as-info-hover: #0087be;
    --as-info-light: #e0f7ff;
    
    /* ===== COLORI NEUTRALI ===== */
    --as-white: #ffffff;
    --as-black: #000000;
    --as-light: #f8f9fa;
    --as-dark: #343a40;
    --as-muted: #6c757d;
    --as-body: #212529;
    --as-border-color: #dee2e6;
    --as-border-light: #e9ecef;
    --as-border-dark: #adb5bd;
    
    /* ===== SCALA GRIGI ===== */
    --as-gray-25: #fafafa;
    --as-gray-50: #f9f9f9;
    --as-gray-100: #f3f4f6;
    --as-gray-200: #e5e7eb;
    --as-gray-300: #d1d5db;
    --as-gray-400: #9ca3af;
    --as-gray-500: #6b7280;
    --as-gray-600: #4b5563;
    --as-gray-700: #374151;
    --as-gray-800: #1f2937;
    --as-gray-900: #111827;
    
    /* ===== SPACING (basato su rem) ===== */
    --as-spacing-xs: 0.125rem;    /* 2px */
    --as-spacing-sm: 0.25rem;     /* 4px */
    --as-spacing-md: 0.5rem;      /* 8px */
    --as-spacing-lg: 1rem;        /* 16px */
    --as-spacing-xl: 1.5rem;      /* 24px */
    --as-spacing-2xl: 2rem;       /* 32px */
    --as-spacing-3xl: 3rem;       /* 48px */
    --as-spacing-4xl: 4rem;       /* 64px */
    --as-spacing-5xl: 5rem;       /* 80px */
    --as-spacing-6xl: 6rem;       /* 96px */
    
    /* ===== TYPOGRAPHY SCALE ===== */
    --as-font-size-xs: 0.75rem;   /* 12px */
    --as-font-size-sm: 0.875rem;  /* 14px */
    --as-font-size-base: 1rem;    /* 16px */
    --as-font-size-lg: 1.125rem;  /* 18px */
    --as-font-size-xl: 1.25rem;   /* 20px */
    --as-font-size-2xl: 1.5rem;   /* 24px */
    --as-font-size-3xl: 1.875rem; /* 30px */
    --as-font-size-4xl: 2.25rem;  /* 36px */
    --as-font-size-5xl: 3rem;     /* 48px */
    
    /* ===== FONT WEIGHTS ===== */
    --as-font-thin: 100;
    --as-font-light: 300;
    --as-font-normal: 400;
    --as-font-medium: 500;
    --as-font-semibold: 600;
    --as-font-bold: 700;
    --as-font-extrabold: 800;
    --as-font-black: 900;
    
    /* ===== BORDER RADIUS ===== */
    --as-radius-none: 0;
    --as-radius-sm: 0.125rem;     /* 2px */
    --as-radius-base: 0.25rem;    /* 4px */
    --as-radius-md: 0.375rem;     /* 6px */
    --as-radius-lg: 0.5rem;       /* 8px */
    --as-radius-xl: 0.75rem;      /* 12px */
    --as-radius-2xl: 1rem;        /* 16px */
    --as-radius-3xl: 1.5rem;      /* 24px */
    --as-radius-full: 9999px;     /* full circle */
    
    /* ===== SHADOWS ===== */
    --as-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --as-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --as-shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --as-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --as-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --as-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --as-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --as-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    
    /* ===== Z-INDEX SCALE ===== */
    --as-z-0: 0;
    --as-z-10: 10;
    --as-z-20: 20;
    --as-z-30: 30;
    --as-z-40: 40;
    --as-z-50: 50;
    --as-z-dropdown: 1000;
    --as-z-sticky: 1020;
    --as-z-fixed: 1030;
    --as-z-modal-backdrop: 1040;
    --as-z-modal: 1050;
    --as-z-popover: 1060;
    --as-z-tooltip: 1070;
    --as-z-toast: 1080;
    
    /* ===== BREAKPOINTS ===== */
    --as-screen-sm: 640px;
    --as-screen-md: 768px;
    --as-screen-lg: 1024px;
    --as-screen-xl: 1280px;
    --as-screen-2xl: 1536px;
    
    /* ===== TRANSITIONS ===== */
    --as-transition-fast: 150ms ease-out;
    --as-transition-base: 250ms ease-out;
    --as-transition-slow: 350ms ease-out;
    --as-transition-all: all var(--as-transition-base);
    
    /* ===== OPACITY SCALE ===== */
    --as-opacity-0: 0;
    --as-opacity-5: 0.05;
    --as-opacity-10: 0.1;
    --as-opacity-25: 0.25;
    --as-opacity-50: 0.5;
    --as-opacity-75: 0.75;
    --as-opacity-90: 0.9;
    --as-opacity-100: 1;
    
    /* ===== BORDER RADIUS ===== */
    --as-radius-none: 0;
    --as-radius-sm: 0.125rem;     /* 2px */
    --as-radius-md: 0.25rem;      /* 4px */
    --as-radius-lg: 0.5rem;       /* 8px */
    --as-radius-xl: 1rem;         /* 16px */
    --as-radius-2xl: 1.5rem;      /* 24px */
    --as-radius-full: 9999px;
    
    /* ===== SHADOWS ===== */
    --as-shadow-none: none;
    --as-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --as-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --as-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --as-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --as-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
    --as-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
    
    /* ===== TYPOGRAPHY ===== */
    --as-font-xs: 0.75rem;        /* 12px */
    --as-font-sm: 0.875rem;       /* 14px */
    --as-font-md: 1rem;           /* 16px */
    --as-font-lg: 1.125rem;       /* 18px */
    --as-font-xl: 1.25rem;        /* 20px */
    --as-font-2xl: 1.5rem;        /* 24px */
    --as-font-3xl: 1.875rem;      /* 30px */
    --as-font-4xl: 2.25rem;       /* 36px */
    
    --as-font-light: 300;
    --as-font-normal: 400;
    --as-font-medium: 500;
    --as-font-semibold: 600;
    --as-font-bold: 700;
    --as-font-extrabold: 800;
    
    --as-line-height-tight: 1.25;
    --as-line-height-normal: 1.5;
    --as-line-height-loose: 1.75;
    --as-line-height-relaxed: 2;
    
    /* ===== Z-INDEX SCALE ===== */
    --as-z-auto: auto;
    --as-z-0: 0;
    --as-z-10: 10;
    --as-z-20: 20;
    --as-z-30: 30;
    --as-z-40: 40;
    --as-z-50: 50;
    --as-z-dropdown: 1000;
    --as-z-sticky: 1020;
    --as-z-fixed: 1030;
    --as-z-modal-backdrop: 1040;
    --as-z-modal: 1050;
    --as-z-popover: 1060;
    --as-z-tooltip: 1070;
    
    /* ===== TRANSIZIONI ===== */
    --as-transition-fast: 150ms;
    --as-transition-normal: 300ms;
    --as-transition-slow: 500ms;
    --as-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --as-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --as-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ===== BREAKPOINTS (per media queries) ===== */
    --as-breakpoint-sm: 576px;
    --as-breakpoint-md: 768px;
    --as-breakpoint-lg: 992px;
    --as-breakpoint-xl: 1200px;
    --as-breakpoint-xxl: 1400px;
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
    :root {
        --as-body: #ffffff;
        --as-border-color: #374151;
        --as-light: #1f2937;
        --as-dark: #f9fafb;
        --as-muted: #9ca3af;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    :root {
        --as-shadow-sm: none;
        --as-shadow-md: none;
        --as-shadow-lg: none;
        --as-shadow-xl: none;
        --as-shadow-2xl: none;
    }
}