/**
 * Design Tokens - SellioAMZ
 * Centralized design system variables for consistency across all pages
 */

:root {
    /* ============================================
       COLORS
       ============================================ */
    
    /* Primary Colors */
    --color-primary: #1677ff;
    --color-secondary: #4ecdc4;
    
    /* Primary Color Variations (RGBA) */
    --color-primary-rgba-05: rgba(22, 119, 255, 0.05);
    --color-primary-rgba-10: rgba(22, 119, 255, 0.1);
    --color-primary-rgba-15: rgba(22, 119, 255, 0.15);
    --color-primary-rgba-20: rgba(22, 119, 255, 0.2);
    --color-primary-rgba-30: rgba(22, 119, 255, 0.3);
    --color-primary-rgba-40: rgba(22, 119, 255, 0.4);
    --color-primary-rgba-50: rgba(22, 119, 255, 0.5);
    --color-primary-rgba-90: rgba(22, 119, 255, 0.9);
    
    /* Secondary Color Variations (RGBA) */
    --color-secondary-rgba-05: rgba(78, 175, 205, 0.05);
    --color-secondary-rgba-10: rgba(78, 175, 205, 0.1);
    --color-secondary-rgba-15: rgba(78, 175, 205, 0.15);
    --color-secondary-rgba-20: rgba(78, 175, 205, 0.2);
    --color-secondary-rgba-90: rgba(78, 175, 205, 0.9);
    
    /* White Variations */
    --color-white: #ffffff;
    --color-white-rgba-05: rgba(255, 255, 255, 0.05);
    --color-white-rgba-10: rgba(255, 255, 255, 0.1);
    --color-white-rgba-15: rgba(255, 255, 255, 0.15);
    --color-white-rgba-30: rgba(255, 255, 255, 0.3);
    --color-white-rgba-50: rgba(255, 255, 255, 0.5);
    --color-white-rgba-70: rgba(255, 255, 255, 0.7);
    --color-white-rgba-80: rgba(255, 255, 255, 0.8);
    --color-white-rgba-90: rgba(255, 255, 255, 0.9);
    
    /* Text Colors */
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.8);
    --color-text-tertiary: rgba(255, 255, 255, 0.7);
    
    /* Background Gradients */
    --gradient-card-bg: linear-gradient(135deg, var(--color-primary-rgba-10) 0%, var(--color-secondary-rgba-10) 100%);
    --gradient-card-bg-hover: linear-gradient(135deg, var(--color-primary-rgba-15) 0%, var(--color-secondary-rgba-15) 100%);
    --gradient-card-featured: linear-gradient(135deg, var(--color-primary-rgba-15) 0%, var(--color-secondary-rgba-15) 100%);
    --gradient-icon-bg: linear-gradient(135deg, var(--color-primary-rgba-90) 0%, var(--color-secondary-rgba-90) 100%);
    --gradient-badge-bg: linear-gradient(135deg, var(--color-primary-rgba-20) 0%, var(--color-secondary-rgba-20) 100%);
    
    /* ============================================
       SPACING
       ============================================ */
    
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 30px;
    --spacing-2xl: 40px;
    --spacing-3xl: 50px;
    --spacing-4xl: 60px;
    
    /* Card Padding */
    --spacing-card-padding: 40px 30px;
    --spacing-card-padding-compact: 24px 20px;
    --spacing-card-padding-featured: 50px 40px;
    
    /* Card Gaps */
    --spacing-card-gap: 24px;
    --spacing-card-gap-mobile: 20px;
    
    /* ============================================
       BORDER RADIUS
       ============================================ */
    
    --radius-card: 24px;
    --radius-icon: 20px;
    --radius-badge: 50px;
    --radius-button: 50px;
    --radius-small: 12px;
    
    /* ============================================
       SHADOWS
       ============================================ */
    
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.2);
    --shadow-card-hover: 0 25px 60px rgba(22, 119, 255, 0.25);
    --shadow-icon: 0 10px 30px rgba(22, 119, 255, 0.3);
    --shadow-icon-hover: 0 15px 40px rgba(22, 119, 255, 0.5);
    
    /* ============================================
       TRANSITIONS
       ============================================ */
    
    --transition-card: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.3s ease;
    --transition-slow: all 0.6s ease;
    
    /* ============================================
       ICON SIZES
       ============================================ */
    
    --icon-size-small: 60px;
    --icon-size-medium: 80px;
    --icon-size-large: 100px;
    
    --icon-font-small: 28px;
    --icon-font-medium: 32px;
    --icon-font-large: 40px;
    --icon-font-xl: 48px;
    
    /* ============================================
       TYPOGRAPHY
       ============================================ */
    
    /* Card Typography */
    --font-card-title-size: 1.3rem;
    --font-card-title-weight: 700;
    --font-card-title-line-height: 1.3;
    
    --font-card-description-size: 0.95rem;
    --font-card-description-line-height: 1.6;
    
    --font-card-badge-size: 0.75rem;
    --font-card-badge-weight: 600;
    
    /* ============================================
       BORDERS
       ============================================ */
    
    --border-card: 1px solid var(--color-white-rgba-10);
    --border-card-hover: 1px solid var(--color-primary-rgba-30);
    --border-card-featured: 2px solid var(--color-primary-rgba-40);
    --border-badge: 1px solid var(--color-primary-rgba-30);
    
    /* ============================================
       BACKDROP FILTER
       ============================================ */
    
    --backdrop-blur: blur(10px);
}