/* ==========================================================================
   GLOBAL CSS VARIABLES & DESIGN TOKENS
   ========================================================================== */

:root {
    /* Brand Primary Colors */
    --primary-blue: #0062ff;
    --dark-blue: #0052cc;
    --navy-blue: #0b1a30;
    
    /* Backgrounds & Neutrals */
    --bg-light: #f8fafc;
    --bg-white: #ffffff;
    --bg-card: #ffffff;
    --bg-input: #fafafa;
    
    /* Text Colors */
    --text-dark: #0f172a;
    --text-main: #334155;
    --text-muted: #64748b;
    --text-light: #94a3b8;
    
    /* Borders & Dividers */
    --border-color: #e2e8f0;
    --border-hover: #cbd5e1;
    
    /* Gradients */
    --badge-red: linear-gradient(90deg, #ff416c, #ff4b2b);
    --hero-gradient: linear-gradient(135deg, #a80077 0%, #6610f2 50%, #1d0047 100%);
    
    /* Box Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    
    /* Typography & Transitions */
    --font-main: 'Poppins', sans-serif;
    --transition: all 0.2s ease-in-out;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
}