/* ============================================
   Global CSS Variables - Professional Color Palette
   ============================================ */

:root {
    /* Primary Colors */
    --color-primary-dark: #0f172a;      /* Slate-900 - Main headings */
    --color-primary: #1e40af;           /* Blue-700 - Primary accent */
    --color-primary-light: #3b82f6;     /* Blue-500 - Hover states */
    
    /* Text Colors */
    --color-text-primary: #0f172a;      /* Slate-900 - Main text */
    --color-text-secondary: #1e293b;    /* Slate-800 - Secondary text */
    --color-text-body: #334155;         /* Slate-700 - Body text */
    --color-text-muted: #475569;        /* Slate-600 - Muted text */
    --color-text-light: #64748b;        /* Slate-500 - Light text */
    --color-text-placeholder: #94a3b8;  /* Slate-400 - Placeholders */
    
    /* Background Colors */
    --color-bg-primary: #ffffff;        /* White */
    --color-bg-secondary: #f8fafc;      /* Slate-50 */
    --color-bg-tertiary: #f1f5f9;      /* Slate-100 */
    
    /* Border Colors */
    --color-border-light: #f1f5f9;      /* Slate-100 */
    --color-border-medium: #e2e8f0;     /* Slate-200 */
    --color-border-dark: #cbd5e1;       /* Slate-300 */
    
    /* Accent Colors */
    --color-accent-blue: #1e40af;       /* Blue-700 */
    --color-accent-blue-light: rgba(30, 64, 175, 0.1);
    --color-accent-blue-medium: rgba(30, 64, 175, 0.15);
    --color-accent-blue-dark: rgba(30, 64, 175, 0.2);
    --color-accent-sky: #0369a1;        /* Sky-700 - For use cases */
    --color-accent-sky-light: rgba(3, 105, 161, 0.1);
    --color-accent-sky-medium: rgba(3, 105, 161, 0.15);
    --color-accent-sky-dark: #0c4a6e;   /* Sky-800 - For steps (text) */
    --color-accent-sky-dark-bg: rgba(3, 105, 161, 0.2);  /* Sky-800 - For backgrounds/borders */
    
    /* Success/Error Colors */
    --color-success: #51cf66;           /* Green */
    --color-error: #ff6b6b;             /* Red */
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #0f172a 0%, #1e40af 100%);
    --gradient-primary-reverse: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    --gradient-button: #0f172a;  /* Dark gray for primary buttons */
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(30, 64, 175, 0.1);
    --shadow-md: 0 4px 20px rgba(30, 64, 175, 0.2);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.2);
    --shadow-button: 0 4px 20px rgba(30, 64, 175, 0.4);
    --shadow-button-hover: 0 6px 30px rgba(30, 64, 175, 0.5);
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 50px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ============================================
   Utility Classes
   ============================================ */

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

.bg-accent-light {
    background: var(--color-bg-secondary);
}

.border-accent {
    border-color: var(--color-border-medium);
}

.shadow-accent {
    box-shadow: var(--shadow-md);
}