/* ZABAL Design System - CSS Variables */
:root {
    /* Brand Colors - ZABAL Ecosystem */
    --navy-900: #141e27;
    --navy-800: #1a2530;
    --navy-700: #202c39;
    --navy-600: #283442;
    --navy-500: #3a4a5c;
    
    --cream-500: #e0ddaa;
    --cream-400: #d4d1a0;
    --cream-300: #ebe8b5;
    --cream-200: #f2f0c4;
    --cream-100: #f8f7d3;
    
    /* ZABAL Accent Colors */
    --zabal-primary: #10b981;    /* ZABAL Green */
    --zabal-secondary: #4f9cf9;  /* Stream Blue */
    --zabal-accent: #f59e0b;     /* Creator Orange */
    --zabal-warning: #ef4444;    /* Alert Red */
    
    /* Multi-chain Colors */
    --solana-purple: #9945ff;
    --base-blue: #0052ff;
    --optimism-red: #ff0420;
    
    /* Typography Scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    
    /* Spacing System */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    
    /* Mobile-First Spacing Tokens */
    --space-section-mobile: 3rem;
    --space-section-tablet: 4rem;
    --space-section-desktop: 5rem;
    --space-section-large: 6rem;
    
    /* Container Padding Tokens */
    --container-padding-mobile: 1rem;
    --container-padding-tablet: 1.5rem;
    --container-padding-desktop: 2rem;
    --container-padding-large: 3rem;
    
    /* Grid Gap Tokens */
    --grid-gap-mobile: 1rem;
    --grid-gap-tablet: 1.5rem;
    --grid-gap-desktop: 2rem;
    
    /* Responsive Typography Tokens */
    --text-hero-mobile: 2.5rem;
    --text-hero-tablet: 3.5rem;
    --text-hero-desktop: 4rem;
    --text-hero-large: 4.5rem;
    
    --text-section-title-mobile: 1.75rem;
    --text-section-title-tablet: 2.25rem;
    --text-section-title-desktop: 2.5rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;
    
    /* 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;
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
    :root {
        --navy-900: #0f1419;
        --navy-800: #151b22;
        --cream-500: #f0eda0;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s;
        --transition-base: 0s;
        --transition-slow: 0s;
    }
}