/* ========================================
   VARIABLES – Taxlyy High‑Tech Edition
   Fluid typography, animated gradients, glass tokens
   ======================================== */

:root {
    /* ── CORE BRAND (Neon / Cyber) ── */
    --primary:               #4361ee;
    --primary-dark:          #3a0ca3;
    --primary-light:         #7209b7;
    --accent:                #4cc9f0;
    --accent-dark:           #3ab5db;
    --accent-dim:            rgba(76,201,240,0.2);

    /* ── GRADIENTS (Animated + Static) ── */
    --gradient-dark:         linear-gradient(135deg, #0b0914 0%, #15132b 50%, #1a1838 100%);
    --gradient-mid:          linear-gradient(135deg, #11102a 0%, #1c1a3e 100%);
    --gradient-hero-bg:      linear-gradient(125deg, #0a0818 0%, #1a1838 40%, #0f0c2a 100%);
    --gradient-accent-line:  linear-gradient(90deg, transparent, var(--accent), var(--primary), transparent);
    --gradient-glow:         radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(76,201,240,0.3), transparent 60%);
    --gradient-card-border:  linear-gradient(135deg, var(--accent), var(--primary), var(--accent));
    --gradient-text:         linear-gradient(135deg, var(--accent), var(--primary));
    --gradient-shimmer:      repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,0.03) 20px, rgba(255,255,255,0.03) 40px);

    /* ── BACKGROUNDS (Layered) ── */
    --bg-dark:               #0a0818;
    --bg-mid:                #11102a;
    --bg-light:              #1c1a3e;
    --bg-glass:              rgba(15, 20, 45, 0.45);
    --bg-glass-light:        rgba(255, 255, 255, 0.05);
    --bg-surface:            rgba(20, 25, 55, 0.6);

    /* Light sections (frosted, not plain) */
    --bg-white:              #f5f7ff;
    --bg-off-white:          #eff2fe;
    --bg-card-light:         rgba(255, 255, 255, 0.85);

    /* ── TEXT (Coordinated Scale) ── */
    --font-family:           'Inter', -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif;
    
    /* Modular scale 1.25 – fluid with clamp */
    --text-xs:               clamp(0.6875rem, 3vw, 0.75rem);   /* 11–12px */
    --text-sm:               clamp(0.8125rem, 3.5vw, 0.875rem); /* 13–14px */
    --text-base:             clamp(1rem, 4vw, 1.125rem);        /* 16–18px */
    --text-md:               clamp(1.125rem, 5vw, 1.25rem);     /* 18–20px */
    --text-lg:               clamp(1.25rem, 5.5vw, 1.5rem);     /* 20–24px */
    --text-xl:               clamp(1.5rem, 6.5vw, 1.875rem);    /* 24–30px */
    --text-2xl:              clamp(1.875rem, 7.5vw, 2.5rem);    /* 30–40px */
    --text-3xl:              clamp(2.5rem, 9vw, 3.5rem);        /* 40–56px */
    --text-4xl:              clamp(3rem, 11vw, 5rem);           /* 48–80px */

    --font-weight-light:     300;
    --font-weight-regular:   400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;

    /* Text colors (chromatic) */
    --text-primary:          #f0f3ff;
    --text-secondary:        #c9d2f0;
    --text-muted:            #8a96c2;
    --text-dark:             #12172e;
    --text-dark-muted:       #5a6793;

    /* ── SPACING (8px baseline grid) ── */
    --space-0:               0;
    --space-1:               0.25rem;   /* 4px */
    --space-2:               0.5rem;    /* 8px */
    --space-3:               0.75rem;   /* 12px */
    --space-4:               1rem;      /* 16px */
    --space-5:               1.25rem;   /* 20px */
    --space-6:               1.5rem;    /* 24px */
    --space-8:               2rem;      /* 32px */
    --space-10:              2.5rem;    /* 40px */
    --space-12:              3rem;      /* 48px */
    --space-16:              4rem;      /* 64px */
    --space-20:              5rem;      /* 80px */
    --space-24:              6rem;      /* 96px */

    /* ── BORDERS & RADIUS ── */
    --border-glass:          rgba(76,201,240,0.2);
    --border-light:          rgba(255,255,255,0.08);
    --radius-sm:             0.5rem;
    --radius-md:             0.75rem;
    --radius-lg:             1rem;
    --radius-xl:             1.5rem;
    --radius-2xl:            2rem;

    /* ── SHADOWS & GLOWS ── */
    --shadow-sm:             0 4px 20px rgba(0,0,0,0.3);
    --shadow-md:             0 8px 30px rgba(0,0,0,0.4);
    --shadow-glow:           0 0 20px rgba(76,201,240,0.3);
    --shadow-glow-strong:    0 0 30px rgba(76,201,240,0.5);
    --shadow-glass:          0 8px 32px rgba(0,0,0,0.2);
    --shadow-hover:          0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(76,201,240,0.3);

    /* ── GLASS & BLUR ── */
    --glass-bg:              rgba(15, 20, 40, 0.65);
    --glass-blur:            blur(12px);
    --glass-border:          0.5px solid var(--border-glass);

    /* ── ANIMATION TIMINGS ── */
    --transition-fast:       0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    --transition:            0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    --transition-slow:       0.6s cubic-bezier(0.2, 0.9, 0.4, 1.1);

    /* ── LAYOUT ── */
    --nav-height:            80px;
    --nav-height-scrolled:   60px;
    --section-padding-v:     clamp(4rem, 12vw, 8rem);
    --section-padding-h:     clamp(1.5rem, 5vw, 3rem);
    --max-width:             1280px;

    /* ── EXTRAS (noise, orbs) ── */
    --noise:                 url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}