/* ═══════════════════════════════════════════
   DataDeep — Design System Variables
   ═══════════════════════════════════════════ */

:root {
    /* Core Palette — da #bb31c7 (magenta) a #0a0a28 (navy) */
    --dd-navy: #0a0a28;
    --dd-navy-light: #150e30;
    --dd-navy-mid: #231540;
    --dd-purple: #bb31c7;
    --dd-purple-light: #d455de;
    --dd-purple-dark: #8a2494;
    --dd-blue: #7b2fd9;
    --dd-blue-light: #9b5cf6;
    --dd-pink: #e44cef;
    --dd-button: #2a1540;
    --dd-white: #ffffff;
    --dd-off-white: #f9f5fc;
    --dd-body: #3a2a44;
    --dd-muted: #6e5a7a;
    --dd-light-gray: #b8a8c8;
    --dd-border: rgba(187, 49, 199, 0.12);
    --dd-border-light: rgba(255, 255, 255, 0.08);
    --dd-success: #22c55e;
    --dd-danger: #ef4444;

    /* Gradients — asse #bb31c7 ↔ #0a0a28 */
    --dd-gradient-icon: linear-gradient(135deg, #e44cef, #7b2fd9);
    --dd-gradient-hero: linear-gradient(160deg, #0a0a28 0%, #150e30 40%, #231540 100%);
    --dd-gradient-cta: linear-gradient(135deg, #bb31c7 0%, #7b2fd9 100%);
    --dd-gradient-purple-blue: linear-gradient(135deg, #bb31c7, #7b2fd9);
    --dd-gradient-text: linear-gradient(135deg, #e44cef, #bb31c7, #7b2fd9);

    /* Typography */
    --font-primary: 'Wix Madefor Display', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: clamp(2.5rem, 4.5vw, 3.25rem);
    --font-size-hero: clamp(2.5rem, 5vw, 3.75rem);
    --line-height-tight: 1.15;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.08em;

    /* Spacing (8px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;
    --space-12: 5rem;
    --space-16: 7.5rem;
    --space-20: 10rem;

    /* Layout */
    --max-width: 1280px;
    --max-width-narrow: 800px;
    --max-width-wide: 1400px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 100px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(10, 10, 40, 0.06);
    --shadow-md: 0 4px 24px rgba(10, 10, 40, 0.08);
    --shadow-lg: 0 8px 40px rgba(10, 10, 40, 0.12);
    --shadow-xl: 0 20px 60px rgba(10, 10, 40, 0.18);
    --shadow-glow-purple: 0 0 40px rgba(187, 49, 199, 0.25);
    --shadow-glow-blue: 0 0 40px rgba(123, 47, 217, 0.20);
    --shadow-glow-pink: 0 0 40px rgba(228, 76, 239, 0.18);

    /* Transitions */
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 0.2s;
    --duration-normal: 0.35s;
    --duration-slow: 0.6s;

    /* Z-index scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-header: 1000;
    --z-overlay: 1500;
    --z-modal: 2000;
}