/* ==========================================================================
   SpedizioniPallet CSS Variables
   Glassmorphism Design System
   ========================================================================== */

:root {
    /* ========================================
       PRIMARY COLORS
       ======================================== */
    --color-primary: #2c2c24;
    --color-primary-hover: #3d4d3d;
    --color-primary-light: rgba(74, 93, 74, 0.1);

    --color-accent: #1a2e3b;
    --color-accent-hover: #112230;
    --color-accent-light: rgba(26, 46, 59, 0.1);

    --color-terracotta: #1a1750;
    --color-terracotta-hover: #504cad  ;
    --color-terracotta-light: rgba(139, 64, 32, 0.1);

    --color-sandy: #d2b48c;
    --color-sandy-hover: #c4a67e;

    /* ========================================
       TEXT COLORS
       ======================================== */
    --color-text: #2c2c24;
    --color-text-secondary: rgba(27, 27, 25, 0.9);
    --color-text-muted: rgba(133, 77, 25, 0.8);
    --color-text-disabled: rgba(171, 103, 38, 0.6);
    --color-text-inverse: #ffffff;

    /* ========================================
       BACKGROUND COLORS
       ======================================== */
    --color-bg-start: #f5f0e8;
    --color-bg-mid: #ebe4d8;
    --color-bg-end: #e0d6c8;

    /* Glass backgrounds */
    --bg-glass: rgba(255, 255, 255, 0.95);
    --glass-panel-bg: rgba(245, 240, 232, 0.95);
    --glass-card-bg: rgba(255, 255, 255, 0.7);
    --glass-input-bg: rgba(255, 255, 255, 0.9);
    --glass-hover-bg: rgba(255, 255, 255, 0.5);
    --glass-active-bg: rgba(255, 255, 255, 0.6);
    --glass-overlay-bg: rgba(44, 44, 36, 0.5);

    /* DataTable rows */
    --datatable-row-bg: rgba(255, 255, 255, 0.6);
    --datatable-row-hover-bg: rgba(255, 255, 255, 0.9);
    --datatable-row-border: rgba(255, 255, 255, 1);

    /* Sidebar specific - EXACT Template colors */
    --sidebar-bg: transparent;
    --sidebar-glass-bg: rgba(235, 228, 215, 0.65);
    --sidebar-item-hover: rgba(255, 255, 255, 0.6);
    --sidebar-item-active: rgba(210, 180, 140, 0.25);
    --sidebar-expanded-bg: rgba(255, 255, 255, 0.4);
    --sidebar-submenu-bg: rgba(255, 255, 255, 0.3);
    --sidebar-submenu-border: rgba(255, 255, 255, 0.4);
    --sidebar-line-color: rgba(160, 140, 110, 0.3);

    /* Profile card gradient - Template glass-card */
    --profile-card-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(240, 230, 210, 0.7) 100%);
    --profile-card-border-top: rgba(255, 255, 255, 0.95);
    --profile-card-border-bottom: rgba(180, 160, 130, 0.2);
    --profile-avatar-gradient: linear-gradient(to top right, #a08060, #8b4020);

    /* ========================================
       BORDERS
       ======================================== */
    --border-glass: 1px solid rgba(160, 140, 110, 0.95);
    --border-glass-subtle: 1px solid rgba(160, 140, 110, 0.95);
    --border-input: rgba(160, 140, 110, 0.3);
    --border-input-focus: var(--color-accent);
    --border-divider: rgba(44, 44, 36, 0.1);

    /* ========================================
       SHADOWS
       ======================================== */
    --shadow-glass: 0 8px 32px rgba(44, 44, 36, 0.08);
    --shadow-glass-raised: 0 20px 50px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.05);
    --shadow-button: 0 4px 12px rgba(26, 46, 59, 0.15);
    --shadow-button-hover: 0 8px 20px rgba(26, 46, 59, 0.3);
    --shadow-focus: 0 0 0 3px rgba(26, 46, 59, 0.1);
    --shadow-card: 0 4px 16px rgba(44, 44, 36, 0.1);
    --shadow-card-hover: 0 8px 24px rgba(44, 44, 36, 0.15);

    /* ========================================
       STATUS COLORS
       ======================================== */
    --color-success: #406640;
    --color-success-hover: #365536;
    --color-success-light: rgba(64, 102, 64, 0.1);

    --color-warning: #d97706;
    --color-warning-hover: #b86305;
    --color-warning-light: rgba(217, 119, 6, 0.1);

    --color-error: #8b4020;
    --color-error-hover: #7a3318;
    --color-error-light: rgba(139, 64, 32, 0.1);

    --color-info: #1a2e3b;
    --color-info-hover: #112230;
    --color-info-light: rgba(26, 46, 59, 0.1);

    /* ========================================
       BADGES
       ======================================== */
    --badge-success-bg: rgb(133 223 133 / 69%);
    --badge-success-color: #406640;
    --badge-success-border: rgba(64, 102, 64, 0.3);

    --badge-warning-bg: rgba(217, 119, 6, 0.15);
    --badge-warning-color: #b86305;
    --badge-warning-border: rgba(217, 119, 6, 0.3);

    --badge-danger-bg: rgba(139, 64, 32, 0.15);
    --badge-danger-color: #8b4020;
    --badge-danger-border: rgba(139, 64, 32, 0.3);

    --badge-primary-bg: rgba(26, 46, 59, 0.1);
    --badge-primary-color: #1a2e3b;
    --badge-primary-border: rgba(26, 46, 59, 0.25);

    --badge-secondary-bg: rgba(210, 180, 140, 0.2);
    --badge-secondary-color: #8b7355;
    --badge-secondary-border: rgba(210, 180, 140, 0.4);

    --badge-info-bg: rgba(44, 44, 36, 0.08);
    --badge-info-color: #2c2c24;
    --badge-info-border: rgba(44, 44, 36, 0.2);

    /* ========================================
       SIZING & SPACING
       ======================================== */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-full: 9999px;

    /* Blur values */
    --blur-sm: 8px;
    --blur-md: 16px;
    --blur-lg: 32px;

    /* Layout */
    --sidebar-width: 96px;
    --sidebar-width-expanded: 280px;
    --header-height: 80px;

    /* ========================================
       TRANSITIONS
       ======================================== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ========================================
       TYPOGRAPHY
       ======================================== */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    /* ========================================
       Z-INDEX LAYERS
       ======================================== */
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-modal-backdrop: 40;
    --z-modal: 50;
    --z-toast: 60;
    --z-tooltip: 70;
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */
.dark {
    /* Primary colors */
    --color-primary: #6b8a6b;
    --color-primary-hover: #7a9a7a;
    --color-primary-light: rgba(107, 138, 107, 0.15);

    --color-accent: #4a7a9a;
    --color-accent-hover: #5a8aaa;
    --color-accent-light: rgba(74, 122, 154, 0.15);

    --color-terracotta: #c4724a;
    --color-terracotta-hover: #d4825a;
    --color-terracotta-light: rgba(196, 114, 74, 0.15);

    /* Text colors */
    --color-text: #e8e0d0;
    --color-text-secondary: rgba(232, 224, 208, 0.7);
    --color-text-muted: rgba(232, 224, 208, 0.5);
    --color-text-disabled: rgba(232, 224, 208, 0.4);
    --color-text-inverse: #1a1a18;

    /* Background colors */
    --color-bg-start: #1a1a18;
    --color-bg-mid: #252520;
    --color-bg-end: #2c2c24;

    /* Glass backgrounds */
    --bg-glass: rgba(44, 44, 36, 0.95);
    --glass-panel-bg: rgba(44, 44, 36, 0.75);
    --glass-card-bg: rgba(60, 60, 52, 0.5);
    --glass-input-bg: rgba(60, 60, 52, 0.6);
    --glass-hover-bg: rgba(80, 80, 72, 0.4);
    --glass-active-bg: rgba(80, 80, 72, 0.5);
    --glass-overlay-bg: rgba(0, 0, 0, 0.6);

    /* Borders */
    --border-glass: rgba(255, 255, 255, 0.1);
    --border-glass-subtle: rgba(255, 255, 255, 0.05);
    --border-input: rgba(160, 140, 110, 0.2);
    --border-divider: rgba(255, 255, 255, 0.1);

    /* Shadows */
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-glass-raised: 0 20px 50px rgba(0, 0, 0, 0.4), 0 10px 20px rgba(0, 0, 0, 0.2);
    --shadow-button: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-button-hover: 0 8px 20px rgba(0, 0, 0, 0.4);
    --shadow-focus: 0 0 0 3px rgba(74, 122, 154, 0.3);

    /* Status colors */
    --color-success: #5a9a5a;
    --color-success-light: rgba(90, 154, 90, 0.15);

    --color-warning: #e8a020;
    --color-warning-light: rgba(232, 160, 32, 0.15);

    --color-error: #c4604a;
    --color-error-light: rgba(196, 96, 74, 0.15);

    --color-info: #5a8aaa;
    --color-info-light: rgba(90, 138, 170, 0.15);
}