/* css/variables.css */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    /* Color Palette - Light Futuristic */
    --bg-primary: #f4f6fc;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-sidebar: #ffffff;
    --bg-input: #ffffff;

    /* Tech Accents */
    --color-primary: #4f46e5;       /* Indigo */
    --color-secondary: #0ea5e9;     /* Cyber Sky Blue */
    --color-accent: #06b6d4;        /* Cyan */
    --color-accent-glow: rgba(14, 165, 233, 0.15);
    
    /* Semantic Colors */
    --color-success: #10b981;       /* Emerald */
    --color-warning: #f59e0b;       /* Amber */
    --color-danger: #ef4444;        /* Rose */
    
    /* Typography Colors */
    --text-primary: #0f172a;        /* Slate-900 */
    --text-secondary: #475569;      /* Slate-600 */
    --text-muted: #94a3b8;          /* Slate-400 */
    --text-light: #ffffff;
    
    /* Borders & Outlines */
    --border-color: rgba(226, 232, 240, 0.8);
    --border-focus: #38bdf8;
    
    /* Shadows - Futuristic Subtle Glows */
    --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
    --shadow-glow: 0 0 15px rgba(99, 102, 241, 0.15);
    --shadow-cyan-glow: 0 0 15px rgba(14, 165, 233, 0.2);

    /* Grid & Layout Units */
    --sidebar-width: 280px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Fonts */
    --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background: radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.08) 0px, transparent 50%), 
                radial-gradient(at 100% 0%, rgba(14, 165, 233, 0.08) 0px, transparent 50%), 
                radial-gradient(at 50% 100%, rgba(6, 182, 212, 0.05) 0px, transparent 50%), 
                #f1f5f9;
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
}