/* ===================================
   PAYWIZE DESIGN SYSTEM
   Consistent design tokens and utilities
   =================================== */

/* ===================================
   1. TYPOGRAPHY SCALE
   =================================== */
:root {
    /* Typography Scale - Consistent sizing */
    --font-xs: 12px;      /* Small labels, captions */
    --font-sm: 14px;      /* Body small, secondary text */
    --font-base: 16px;    /* Base body text */
    --font-lg: 18px;      /* Large body text */
    --font-xl: 24px;      /* Small headings (h4) */
    --font-2xl: 32px;     /* Medium headings (h3) */
    --font-3xl: 40px;     /* Large headings (h2) */
    --font-4xl: 48px;     /* Extra large headings (h1) */
    --font-5xl: 64px;     /* Hero text */
    
    /* Line Heights */
    --leading-tight: 1.2;
    --leading-snug: 1.4;
    --leading-normal: 1.6;
    --leading-relaxed: 1.8;
    
    /* Font Weights */
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
}

/* ===================================
   2. SPACING SCALE
   =================================== */
:root {
    /* Consistent spacing scale (8px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;
}

/* ===================================
   3. GRADIENT SYSTEM (Standardized)
   =================================== */
:root {
    /* Primary Gradients - Use for CTAs and key elements */
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --gradient-primary-hover: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    
    /* Secondary Gradients - Use for cards and backgrounds */
    --gradient-secondary: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    --gradient-tertiary: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    
    /* Feature Gradients - Color-coded by category */
    --gradient-blue: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    --gradient-pink: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    --gradient-green: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-orange: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --gradient-red: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --gradient-indigo: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --gradient-teal: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    
    /* Overlay Gradients */
    --gradient-overlay-light: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0.6));
    --gradient-overlay-dark: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
}

/* ===================================
   4. ICON SYSTEM (Consistent Solid Style)
   =================================== */
.icon {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900; /* Solid style */
    font-style: normal;
}

/* Icon Sizes */
.icon-xs { font-size: var(--font-xs); }
.icon-sm { font-size: var(--font-sm); }
.icon-base { font-size: var(--font-base); }
.icon-lg { font-size: var(--font-lg); }
.icon-xl { font-size: var(--font-xl); }
.icon-2xl { font-size: var(--font-2xl); }
.icon-3xl { font-size: var(--font-3xl); }

/* Icon Containers - Consistent styling */
.icon-container {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--font-xl);
}

.icon-container-sm {
    width: 40px;
    height: 40px;
    font-size: var(--font-lg);
    border-radius: 10px;
}

.icon-container-lg {
    width: 60px;
    height: 60px;
    font-size: var(--font-2xl);
    border-radius: 16px;
}

/* ===================================
   5. VISUAL HIERARCHY UTILITIES
   =================================== */

/* Emphasis Levels */
.text-primary {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

.text-secondary {
    color: var(--text-secondary);
    font-weight: var(--font-regular);
}

.text-tertiary {
    color: var(--text-tertiary);
    font-weight: var(--font-regular);
}

/* Size Hierarchy */
.display-1 {
    font-size: var(--font-5xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
}

.display-2 {
    font-size: var(--font-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
}

.heading-1 {
    font-size: var(--font-3xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
}

.heading-2 {
    font-size: var(--font-2xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
}

.heading-3 {
    font-size: var(--font-xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-normal);
}

.body-large {
    font-size: var(--font-lg);
    line-height: var(--leading-relaxed);
}

.body {
    font-size: var(--font-base);
    line-height: var(--leading-normal);
}

.body-small {
    font-size: var(--font-sm);
    line-height: var(--leading-normal);
}

.caption {
    font-size: var(--font-xs);
    line-height: var(--leading-normal);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===================================
   6. WHITE SPACE UTILITIES
   =================================== */

/* Section Spacing - Generous padding */
.section-spacing {
    padding: var(--space-20) 0;
}

.section-spacing-lg {
    padding: var(--space-24) 0;
}

.section-spacing-xl {
    padding: var(--space-32) 0;
}

/* Container Spacing */
.container-tight {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.container-comfortable {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-8);
}

/* Card Spacing - More breathing room */
.card-padding {
    padding: var(--space-8);
}

.card-padding-lg {
    padding: var(--space-10);
}

/* Content Spacing */
.content-spacing > * + * {
    margin-top: var(--space-6);
}

.content-spacing-lg > * + * {
    margin-top: var(--space-8);
}

/* Gap Utilities */
.gap-sm { gap: var(--space-2); }
.gap { gap: var(--space-4); }
.gap-lg { gap: var(--space-6); }
.gap-xl { gap: var(--space-8); }

/* ===================================
   7. SHADOW SYSTEM (Visual Depth)
   =================================== */
.shadow-xs {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.shadow-sm {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.shadow-md {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.shadow-xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Hover Shadows - For interactive elements */
.hover-shadow {
    transition: box-shadow 0.3s ease;
}

.hover-shadow:hover {
    box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.3);
}

/* ===================================
   8. BORDER RADIUS SYSTEM
   =================================== */
:root {
    --radius-sm: 8px;
    --radius: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-full: 9999px;
}

/* ===================================
   9. TRANSITION SYSTEM
   =================================== */
:root {
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===================================
   10. RESPONSIVE BREAKPOINTS
   =================================== */
:root {
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;
}

/* ===================================
   UTILITY CLASSES
   =================================== */

/* Gradient Backgrounds */
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-secondary { background: var(--gradient-secondary); }
.bg-gradient-blue { background: var(--gradient-blue); }
.bg-gradient-purple { background: var(--gradient-purple); }
.bg-gradient-pink { background: var(--gradient-pink); }
.bg-gradient-green { background: var(--gradient-green); }
.bg-gradient-orange { background: var(--gradient-orange); }
.bg-gradient-red { background: var(--gradient-red); }

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

/* Responsive Typography */
@media (max-width: 768px) {
    :root {
        --font-5xl: 48px;
        --font-4xl: 40px;
        --font-3xl: 32px;
        --font-2xl: 24px;
    }
    
    .section-spacing {
        padding: var(--space-12) 0;
    }
    
    .section-spacing-lg {
        padding: var(--space-16) 0;
    }
}

@media (max-width: 576px) {
    :root {
        --font-5xl: 40px;
        --font-4xl: 32px;
        --font-3xl: 28px;
        --font-2xl: 20px;
    }
}