/* css/variables.css */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
    /* Color Palette - Light-Mode Apple Liquid Glass */
    --canvas-bg: linear-gradient(135deg, #F0F4F8 0%, #E2EAF0 100%);
    --card-bg: rgba(255, 255, 255, 0.48);
    --card-bg-hover: rgba(255, 255, 255, 0.72);
    --modal-bg: rgba(255, 255, 255, 0.92);
    
    /* Core Accents - Premium Oceanic Tones */
    --accent-blue: #0088FF;        /* Electric Sky Blue */
    --accent-azure: #0055FF;       /* Deep Pool Azure */
    --accent-sky: #00D5FF;         /* Pure Turquoise Cyan */
    --accent-gold: #FF9F0A;        /* Premium Gold Warning */
    --accent-green: #34C759;       /* Emerald Success */
    --accent-red: #FF3B30;         /* Coral Alert Red */

    /* Text Layers - High Readability Slate Tones */
    --text-slate: #161A22;         /* Pitch Dark Slate */
    --text-navy: #2E4057;          /* Steel Navy */
    --text-muted: #5C6E82;         /* Cool Grey Muted */

    /* Glass Borders & Inner Shadows */
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-border-focus: rgba(0, 85, 255, 0.4);
    --glass-border-subtle: rgba(255, 255, 255, 0.35);
    --glass-inner-glow: inset 0 1px 1px rgba(255, 255, 255, 0.85), 0 1px 3px rgba(0, 0, 0, 0.02);

    /* Shadows */
    --shadow-sm: 0 4px 12px rgba(0, 45, 98, 0.04);
    --shadow-md: 0 10px 25px rgba(0, 45, 98, 0.08);
    --shadow-lg: 0 20px 45px rgba(0, 45, 98, 0.12);

    /* Typography */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Corner Roundness */
    --radius-xl: 1.5rem;    /* 24px - dashboards, cards */
    --radius-md: 0.75rem;   /* 12px - inputs, buttons */
    --radius-sm: 0.5rem;    /* 8px - badges, small elements */
    --radius-full: 9999px;  /* Pill elements */

    /* Animation Transitions - Apple Style Elastic Spring */
    --transition-apple: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

    /* Scrollbars colors */
    --scrollbar-track: rgba(0, 85, 255, 0.03);
    --scrollbar-thumb: rgba(0, 85, 255, 0.15);
    --scrollbar-thumb-hover: rgba(0, 85, 255, 0.3);

    /* Mouse Tracking Initial coordinates */
    --mouse-x: 50%;
    --mouse-y: 50%;
}