/**
 * AM Cloud - Global CSS Variables
 * Single source of truth for design tokens
 * Used by all pages, components, and areas
 *
 * Responsive Design System:
 * - Mobile First approach
 * - Fluid typography using clamp()
 * - CSS Container Queries for component-level responsiveness
 * - Breakpoints: sm(640) md(768) lg(1024) xl(1280) 2xl(1536) 3xl(1920) 4k(2560)
 */

:root {
    /* Brand Colors */
    --brand-primary: #667eea;
    --brand-secondary: #764ba2;
    --brand-accent: #3b82f6;
    --brand-blue: #3b82f6;
    --brand-success: #10b981;
    --brand-warning: #f59e0b;
    --brand-error: #ef4444;
    --brand-info: #06b6d4;

    /* Alpha Variants (for backgrounds) */
    --brand-blue-alpha: rgba(59, 130, 246, 0.1);
    --brand-primary-alpha: rgba(102, 126, 234, 0.1);
    --color-error-alpha: rgba(239, 68, 68, 0.1);
    --color-success-alpha: rgba(16, 185, 129, 0.1);

    /* Semantic Colors */
    --color-error: #ef4444;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-info: #06b6d4;

    /* ==========================================================================
       RESPONSIVE SPACING - Fluid Scale using clamp()
       Formula: clamp(min, preferred, max)
       Preferred uses viewport width for fluid scaling
       ========================================================================== */
    --space-xs: clamp(0.125rem, 0.1rem + 0.1vw, 0.25rem);      /* 2-4px */
    --space-sm: clamp(0.25rem, 0.2rem + 0.15vw, 0.375rem);     /* 4-6px */
    --space-md: clamp(0.5rem, 0.4rem + 0.25vw, 0.75rem);       /* 8-12px */
    --space-lg: clamp(0.75rem, 0.6rem + 0.4vw, 1rem);          /* 12-16px */
    --space-xl: clamp(1rem, 0.8rem + 0.5vw, 1.5rem);           /* 16-24px */
    --space-2xl: clamp(1.5rem, 1.2rem + 0.75vw, 2rem);         /* 24-32px */
    --space-3xl: clamp(2rem, 1.5rem + 1vw, 3rem);              /* 32-48px */
    --space-4xl: clamp(3rem, 2rem + 1.5vw, 4rem);              /* 48-64px */

    /* ==========================================================================
       RESPONSIVE TYPOGRAPHY - Fluid Font Sizes using clamp()
       Base: 16px at 1920px viewport
       Scales down to 14px at 320px, up to 18px at 3840px
       ========================================================================== */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'Cascadia Code', 'Consolas', 'Monaco', monospace;

    /* Fluid font sizes - scale with viewport */
    --font-size-xs: clamp(0.625rem, 0.6rem + 0.1vw, 0.75rem);     /* 10-12px */
    --font-size-sm: clamp(0.6875rem, 0.65rem + 0.15vw, 0.8125rem); /* 11-13px */
    --font-size-base: clamp(0.75rem, 0.7rem + 0.2vw, 0.9375rem);   /* 12-15px */
    --font-size-lg: clamp(0.8125rem, 0.75rem + 0.25vw, 1rem);      /* 13-16px */
    --font-size-xl: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem);   /* 15-18px */
    --font-size-2xl: clamp(1.125rem, 1rem + 0.4vw, 1.5rem);        /* 18-24px */
    --font-size-3xl: clamp(1.375rem, 1.2rem + 0.5vw, 1.875rem);    /* 22-30px */
    --font-size-4xl: clamp(1.75rem, 1.5rem + 0.75vw, 2.5rem);      /* 28-40px */
    --font-size-5xl: clamp(2.25rem, 1.8rem + 1vw, 3.5rem);         /* 36-56px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ==========================================================================
       RESPONSIVE LAYOUT DIMENSIONS
       ========================================================================== */
    /* Sidebar widths - fluid based on viewport */
    --sidebar-width: clamp(180px, 12vw, 240px);           /* 180-240px */
    --sidebar-collapsed-width: clamp(48px, 3.5vw, 64px);  /* 48-64px */

    /* Navbar height - slightly fluid */
    --navbar-height: clamp(56px, 4vw, 72px);              /* 56-72px */

    /* Content max-width for ultra-wide screens */
    --content-max-width: 2400px;

    /* Container padding - fluid */
    --container-padding: clamp(0.75rem, 1.5vw, 2rem);     /* 12-32px */

    /* ==========================================================================
       BORDER RADIUS - Slightly fluid for larger screens
       ========================================================================== */
    --radius-none: 0;
    --radius-sm: clamp(0.125rem, 0.1rem + 0.05vw, 0.1875rem);  /* 2-3px */
    --radius-md: clamp(0.25rem, 0.2rem + 0.1vw, 0.375rem);     /* 4-6px */
    --radius-lg: clamp(0.375rem, 0.3rem + 0.15vw, 0.5rem);     /* 6-8px */
    --radius-xl: clamp(0.5rem, 0.4rem + 0.2vw, 0.75rem);       /* 8-12px */
    --radius-2xl: clamp(0.75rem, 0.6rem + 0.25vw, 1rem);       /* 12-16px */
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* 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;

    /* ==========================================================================
       BREAKPOINTS - Extended for all screen sizes
       Use in media queries: @media (min-width: 768px) { }
       ========================================================================== */
    --breakpoint-xs: 480px;   /* Extra small phones */
    --breakpoint-sm: 640px;   /* Large phones */
    --breakpoint-md: 768px;   /* Tablets */
    --breakpoint-lg: 1024px;  /* Small laptops (13") */
    --breakpoint-xl: 1280px;  /* Laptops (15") */
    --breakpoint-2xl: 1536px; /* Large laptops / small monitors */
    --breakpoint-3xl: 1920px; /* Full HD monitors */
    --breakpoint-4xl: 2560px; /* 2K / QHD monitors */
    --breakpoint-5xl: 3840px; /* 4K monitors */

    /* ==========================================================================
       GRID SYSTEM - Responsive column counts
       ========================================================================== */
    --grid-columns: 12;
    --grid-gap: var(--space-md);

    /* Auto-fit grid item min/max widths */
    --grid-item-min: 280px;
    --grid-item-max: 1fr;
}