/* =====================
   CSS Variables
   ===================== */
:root {
    /* Colors */
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-light: #3b82f6;
    --color-secondary: #f97316;
    --color-secondary-dark: #ea580c;
    --color-dark: #1e293b;
    --color-gray-900: #0f172a;
    --color-gray-800: #1e293b;
    --color-gray-700: #334155;
    --color-gray-600: #475569;
    --color-gray-500: #64748b;
    --color-gray-400: #94a3b8;
    --color-gray-300: #cbd5e1;
    --color-gray-200: #e2e8f0;
    --color-gray-100: #f1f5f9;
    --color-gray-50: #f8fafc;
    --color-white: #ffffff;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    /* Border Radius */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Background Colors */
    --bg-base: #ffffff;
    --bg-soft: #f8fafc;
    --bg-ink: #0f172a;

    /* Glow Effects */
    --glow-blue: rgba(37, 99, 235, 0.08);
    --glow-orange: rgba(249, 115, 22, 0.06);
    --glow-slate: rgba(15, 23, 42, 0.06);

    /* SVG Patterns */
    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");

    --waves-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%232563eb' fill-opacity='0.06' d='M0,224L60,213.3C120,203,240,181,360,181.3C480,181,600,203,720,213.3C840,224,960,224,1080,208C1200,192,1320,160,1380,144L1440,128L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'/%3E%3Cpath fill='%232563eb' fill-opacity='0.04' d='M0,288L60,272C120,256,240,224,360,213.3C480,203,600,213,720,229.3C840,245,960,267,1080,261.3C1200,256,1320,224,1380,208L1440,192L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'/%3E%3C/svg%3E");

    --waves-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%232563eb' fill-opacity='0.05' d='M0,96L60,106.7C120,117,240,139,360,144C480,149,600,139,720,122.7C840,107,960,85,1080,90.7C1200,96,1320,128,1380,144L1440,160L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z'/%3E%3C/svg%3E");

    --waves-multi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 500' preserveAspectRatio='none'%3E%3Cpath fill='%232563eb' fill-opacity='0.07' d='M0,350L48,330C96,310,192,270,288,260C384,250,480,270,576,290C672,310,768,330,864,320C960,310,1056,270,1152,250C1248,230,1344,230,1392,230L1440,230L1440,500L1392,500C1344,500,1248,500,1152,500C1056,500,960,500,864,500C768,500,672,500,576,500C480,500,384,500,288,500C192,500,96,500,48,500L0,500Z'/%3E%3Cpath fill='%232563eb' fill-opacity='0.05' d='M0,400L48,390C96,380,192,360,288,350C384,340,480,340,576,360C672,380,768,420,864,420C960,420,1056,380,1152,360C1248,340,1344,340,1392,340L1440,340L1440,500L1392,500C1344,500,1248,500,1152,500C1056,500,960,500,864,500C768,500,672,500,576,500C480,500,384,500,288,500C192,500,96,500,48,500L0,500Z'/%3E%3Cpath fill='%232563eb' fill-opacity='0.03' d='M0,450L48,445C96,440,192,430,288,425C384,420,480,420,576,430C672,440,768,460,864,465C960,470,1056,460,1152,450C1248,440,1344,430,1392,425L1440,420L1440,500L1392,500C1344,500,1248,500,1152,500C1056,500,960,500,864,500C768,500,672,500,576,500C480,500,384,500,288,500C192,500,96,500,48,500L0,500Z'/%3E%3C/svg%3E");

    --waves-top-multi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='%232563eb' fill-opacity='0.06' d='M0,150L48,170C96,190,192,230,288,240C384,250,480,230,576,200C672,170,768,130,864,130C960,130,1056,170,1152,190C1248,210,1344,210,1392,210L1440,210L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'/%3E%3Cpath fill='%232563eb' fill-opacity='0.04' d='M0,100L48,110C96,120,192,140,288,150C384,160,480,160,576,140C672,120,768,80,864,70C960,60,1056,80,1152,100C1248,120,1344,140,1392,150L1440,160L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'/%3E%3Cpath fill='%232563eb' fill-opacity='0.025' d='M0,50L48,55C96,60,192,70,288,80C384,90,480,100,576,90C672,80,768,50,864,40C960,30,1056,40,1152,55C1248,70,1344,90,1392,100L1440,110L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'/%3E%3C/svg%3E");

    --mountains: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='%230f172a' fill-opacity='0.03' d='M0,400 L0,300 L200,180 L350,280 L500,120 L650,220 L800,80 L950,200 L1100,100 L1250,220 L1440,140 L1440,400 Z'/%3E%3Cpath fill='%232563eb' fill-opacity='0.04' d='M0,400 L0,320 L150,220 L300,300 L450,180 L600,260 L750,140 L900,240 L1050,160 L1200,260 L1350,180 L1440,220 L1440,400 Z'/%3E%3Cpath fill='%232563eb' fill-opacity='0.03' d='M0,400 L0,350 L100,280 L250,340 L400,240 L550,320 L700,220 L850,300 L1000,230 L1150,310 L1300,250 L1440,300 L1440,400 Z'/%3E%3C/svg%3E");

    --flow-curves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='none'%3E%3Cpath d='M0,300 Q360,200 720,300 T1440,250' fill='none' stroke='%232563eb' stroke-width='2' opacity='0.08'/%3E%3Cpath d='M0,350 Q400,280 800,380 T1440,320' fill='none' stroke='%232563eb' stroke-width='1.5' opacity='0.06'/%3E%3Cpath d='M0,250 Q320,180 640,280 T1280,220 T1440,260' fill='none' stroke='%232563eb' stroke-width='1' opacity='0.05'/%3E%3C/svg%3E");

    --soft-blobs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 800' preserveAspectRatio='none'%3E%3Cellipse cx='200' cy='150' rx='300' ry='200' fill='%232563eb' opacity='0.04'/%3E%3Cellipse cx='1200' cy='600' rx='400' ry='250' fill='%232563eb' opacity='0.03'/%3E%3Cellipse cx='800' cy='400' rx='200' ry='150' fill='%23f97316' opacity='0.02'/%3E%3C/svg%3E");

    --diagonal-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='%232563eb' stroke-width='0.3' opacity='0.1'/%3E%3C/svg%3E");

    --wave-layered: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath fill='%232563eb' fill-opacity='0.08' d='M0,100 C360,150 720,50 1080,100 S1440,80 1440,80 L1440,200 L0,200 Z'/%3E%3Cpath fill='%232563eb' fill-opacity='0.05' d='M0,120 C320,80 640,160 960,120 S1280,140 1440,100 L1440,200 L0,200 Z'/%3E%3Cpath fill='%232563eb' fill-opacity='0.03' d='M0,150 C240,120 480,180 720,150 S960,170 1200,140 S1440,160 1440,160 L1440,200 L0,200 Z'/%3E%3C/svg%3E");
}