/* CSS Variables - Design Tokens */
:root {
    /* Colors */
    --color-bg-primary: #000000;
    --color-bg-dark: #0a0a0a;
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.9);

    --color-accent-green: #b4f481;
    --color-accent-cyan: #7dd3c0;
    --color-accent-blue: #5eb3d9;
    
    /* Gradients */
    --gradient-hero: linear-gradient(135deg, #b4f481 0%, #7dd3c0 50%, #2a5a6f 100%);
    --gradient-cta:
        linear-gradient(260.23deg, rgba(5, 14, 230, 0) 68.82%, #4D34F4 145.14%),
        linear-gradient(94.13deg, rgba(57, 244, 165, 0) 40.82%, #00FF94 126.4%),
        radial-gradient(42.5% 42.85% at 54.23% 100%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 77.5%),
        linear-gradient(45deg, #82DBF7 0%, #B6F09C 100%),
        linear-gradient(225deg, #4D62E5 0%, #87DDEE 45.31%, #B6F09C 100%),
        linear-gradient(0deg, #7764EE, #7764EE);
    --gradient-cta-hover: linear-gradient(0deg, #87DDEE, #87DDEE),
    linear-gradient(260.23deg, rgba(77, 98, 229, 0) 68.82%, #4D62E5 145.14%),
    linear-gradient(94.13deg, rgba(182, 240, 156, 0) 40.82%, #B6F09C 126.4%),
    radial-gradient(42.5% 42.85% at 54.23% 100%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 77.5%);
    
    --gradient-text: linear-gradient(90deg, #b4f481 0%, #7dd3c0 100%);
    --gradient-card: linear-gradient(180deg, rgba(180, 244, 129, 0.05) 0%, rgba(125, 211, 192, 0.05) 100%);
    
    /* Typography */
    --font-family-primary: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Font Sizes - Adaptive from Figma */
    --font-size-hero: clamp(3rem, 8vw, 8rem);          /* H1 - hero title (128px on 1920px) */
    --font-size-h1: clamp(2.5rem, 5vw, 6rem);          /* H2 - section titles (96px on 1920px) */
    --font-size-h2: clamp(2rem, 4vw, 4rem);            /* H3 - subsection titles (64px on 1920px) */
    --font-size-h3: clamp(2rem, 4vw, 4rem);            /* H3 - same as H2 */
    --font-size-h4: clamp(1.25rem, 2vw, 1.875rem);     /* H4 - card titles (30px on 1920px) */
    --font-size-body-lg: clamp(1rem, 1.2vw, 1.125rem); /* 1 txt - body large (18px) */
    --font-size-body: clamp(0.875rem, 1vw, 0.875rem);  /* 2 txt - body text (14px) */
    --font-size-body-xl: clamp(2rem, 4vw, 4rem);       /* 3 txt - large body (64px) */
    --font-size-btn: 1.125rem;                         /* Btn txt (18px) */
    --font-size-small: 0.875rem;                       /* 14px */
    
    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Line Heights - Exact from Figma */
    --line-height-tight: 130%;         /* For headings */
    --line-height-normal: 1.366em;    /* For body text */
    --line-height-relaxed: 1.1em;     /* For large body */
    
    /* Letter Spacing */
    --letter-spacing-tight: -0.04em;  /* -4% */
    
    /* Spacing */
    --space-xs: clamp(0.5rem, 1vw, 0.75rem);
    --space-sm: clamp(0.75rem, 1.5vw, 1rem);
    --space-md: clamp(1rem, 2vw, 1.5rem);
    --space-lg: clamp(1.5rem, 3vw, 2rem);
    --space-xl: clamp(2rem, 4vw, 3rem);
    --space-2xl: clamp(3rem, 6vw, 4rem);
    --space-3xl: clamp(4rem, 8vw, 6rem);
    --space-4xl: clamp(5rem, 10vw, 7.5rem);
    
    /* Section Spacing */
    --section-padding-y: clamp(3.75rem, 8vw, 7.5rem);
    --section-padding-x: clamp(1rem, 3vw, 1.5rem);
    
    /* Container */
    --container-max-width: 1580px;
    --container-narrow: 1156px;
    --container-padding: clamp(1rem, 5vw, 100px);
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-2xl: 48px;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 40px rgba(180, 244, 129, 0.3);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Z-index */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 100;
    --z-fixed: 1000;
    --z-modal: 10000;
    
    /* Breakpoints (for reference in media queries) */
    --bp-mobile: 375px;
    --bp-tablet: 768px;
    --bp-desktop: 1024px;
    --bp-large: 1440px;
}