/* ================================
   PACKING LIST 2.0 - DESIGN TOKENS
   2025 Color Palette & Variables
   Designer #1's Foundation
   ================================ */

:root {
    /* ================================
       PRIMARY COLORS - Fresh & Modern
       ================================ */
    --color-primary-50: #f0fdf4;
    --color-primary-100: #dcfce7;
    --color-primary-200: #bbf7d0;
    --color-primary-300: #86efac;
    --color-primary-400: #4ade80;
    --color-primary-500: #22c55e;
    --color-primary-600: #16a34a;
    --color-primary-700: #15803d;
    --color-primary-800: #166534;
    --color-primary-900: #14532d;

    /* ================================
       ACCENT COLORS - Vibrant Purple
       ================================ */
    --color-accent-50: #faf5ff;
    --color-accent-100: #f3e8ff;
    --color-accent-200: #e9d5ff;
    --color-accent-300: #d8b4fe;
    --color-accent-400: #c084fc;
    --color-accent-500: #a855f7;
    --color-accent-600: #9333ea;
    --color-accent-700: #7e22ce;
    --color-accent-800: #6b21a8;
    --color-accent-900: #581c87;

    /* ================================
       SEMANTIC COLORS
       ================================ */
    --color-success-500: #10b981;
    --color-success-600: #059669;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;
    --color-danger-500: #ef4444;
    --color-danger-600: #dc2626;
    --color-info-500: #3b82f6;
    --color-info-600: #2563eb;

    /* ================================
       NEUTRAL COLORS - Readable
       ================================ */
    --color-neutral-50: #f9fafb;
    --color-neutral-100: #f3f4f6;
    --color-neutral-200: #e5e7eb;
    --color-neutral-300: #d1d5db;
    --color-neutral-400: #9ca3af;
    --color-neutral-500: #6b7280;
    --color-neutral-600: #4b5563;
    --color-neutral-700: #374151;
    --color-neutral-800: #1f2937;
    --color-neutral-900: #111827;

    /* ================================
       GRADIENTS - 2025 Style
       ================================ */
    --gradient-primary: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    --gradient-accent: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-info: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.3) 100%);

    /* ================================
       BACKGROUNDS - Glass Morphism
       ================================ */
    --bg-glass: rgba(255, 255, 255, 0.8);
    --bg-glass-dark: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-blur: blur(20px);

    /* ================================
       SPACING - 8px Grid System
       ================================ */
    --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 */

    /* ================================
       TYPOGRAPHY - Heebo Font
       ================================ */
    --font-family: 'Heebo', sans-serif;
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* ================================
       BORDER RADIUS - Smooth
       ================================ */
    --radius-sm: 0.375rem;   /* 6px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-2xl: 1.5rem;    /* 24px */
    --radius-full: 9999px;   /* Circle */

    /* ================================
       SHADOWS - Layered Depth
       ================================ */
    --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);
    
    /* Glass Shadow */
    --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

    /* ================================
       TRANSITIONS - Smooth
       ================================ */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ================================
       Z-INDEX LAYERS
       ================================ */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ================================
   DARK MODE - Future Ready
   ================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --color-neutral-50: #1f2937;
        --color-neutral-100: #111827;
        --color-neutral-900: #f9fafb;
        --bg-glass: rgba(31, 41, 55, 0.8);
        --bg-glass-dark: rgba(31, 41, 55, 0.6);
        --glass-border: rgba(255, 255, 255, 0.1);
    }
}

/* ================================
   UTILITY CLASSES
   ================================ */
.text-gradient-primary {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-accent {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-glass {
    background: var(--bg-glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}