/* CSS Variables */
:root {
    /* Colors */
    --color-background: #000000; 
    --color-surface: rgba(40, 40, 40, 1);
    --color-surface-secondary: rgba(30, 30, 30, 1);
    --color-text-primary: #FFFFFF;
    --color-text-secondary: rgba(255, 255, 255, 0.9);
    --color-text-muted: rgba(255, 255, 255, 0.7);
    --color-border: rgba(255, 255, 255, 0.3);
    --color-border-light: rgba(255, 255, 255, 0.1);
    --color-accent: rgba(255, 255, 255, 0.05);
    
    /* Gradients */
    --gradient-card: linear-gradient(-47deg, #282828 0%, #0b0c0c 45%, #1e1e1e 100%);
    --gradient-border: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 1) 100%);
    --gradient-border-accordion: linear-gradient(170deg, rgba(255, 255, 255, 1) 0%, rgba(64, 64, 64, 1) 30%, rgba(64, 64, 64, 1) 50%, rgba(255, 255, 255, 1) 100%);
    --gradient-border-secondary: linear-gradient(121deg, rgba(255, 255, 255, 0) 67%, rgba(255, 255, 255, 1) 95%);
    --gradient-hero-border: linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.05) 53%, rgba(255, 255, 255, 0.05) 100%);
    
    /* Typography */
    --font-heading: 'Clash Display Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Body Text Font Sizes */
    --font-size-body-micro: 0.625rem; /* 10px */
    --font-size-body-small: 0.75rem; /* 12px */
    --font-size-body-normal: 0.875rem; /* 14px */
    --font-size-body-medium: 1rem; /* 16px */
    --font-size-body-large: 1.125rem; /* 18px */
    
    /* Body Text Line Heights */
    --line-height-body-micro: 1.4; /* 14px */
    --line-height-body-small: 1.5; /* 18px */
    --line-height-body-normal: 1.4286; /* 20px */
    --line-height-body-medium: 1.375; /* 22px */
    --line-height-body-large: 1.4444; /* 26px */
    
    /* Title/Heading Font Sizes - Desktop */
    --font-size-h1-desktop: 3.5rem; /* 56px */
    --font-size-h2-desktop: 2.5rem; /* 40px */
    --font-size-h3-desktop: 2rem; /* 32px */
    --font-size-h4-desktop: 1.5rem; /* 24px */
    --font-size-h5-desktop: 1.25rem; /* 20px */
    --font-size-h6-desktop: 1rem; /* 16px */
    
    /* Title/Heading Line Heights - Desktop */
    --line-height-h1-desktop: 1.1071; /* 62px */
    --line-height-h2-desktop: 1.1; /* 44px */
    --line-height-h3-desktop: 1.125; /* 36px */
    --line-height-h4-desktop: 1.1667; /* 28px */
    --line-height-h5-desktop: 1.2; /* 24px */
    --line-height-h6-desktop: 1.25; /* 20px */
    
    /* Title/Heading Font Sizes - Mobile */
    --font-size-h1-mobile: 2.5rem; /* 40px */
    --font-size-h2-mobile: 2rem; /* 32px */
    --font-size-h3-mobile: 1.5rem; /* 24px */
    --font-size-h4-mobile: 1.25rem; /* 20px */
    --font-size-h5-mobile: 1.125rem; /* 18px */
    --font-size-h6-mobile: 0.875rem; /* 14px */
    
    /* Title/Heading Line Heights - Mobile */
    --line-height-h1-mobile: 1.1; /* 44px */
    --line-height-h2-mobile: 1.125; /* 36px */
    --line-height-h3-mobile: 1.1667; /* 28px */
    --line-height-h4-mobile: 1.3; /* 26px */
    --line-height-h5-mobile: 1.2222; /* 22px */
    --line-height-h6-mobile: 1.4286; /* 20px */
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    
    /* Default heading sizes (desktop) */
    --font-size-h1: var(--font-size-h1-desktop);
    --font-size-h2: var(--font-size-h2-desktop);
    --font-size-h3: var(--font-size-h3-desktop);
    --font-size-h4: var(--font-size-h4-desktop);
    --font-size-h5: var(--font-size-h5-desktop);
    --font-size-h6: var(--font-size-h6-desktop);
    
    /* Default heading line heights (desktop) */
    --line-height-h1: var(--line-height-h1-desktop);
    --line-height-h2: var(--line-height-h2-desktop);
    --line-height-h3: var(--line-height-h3-desktop);
    --line-height-h4: var(--line-height-h4-desktop);
    --line-height-h5: var(--line-height-h5-desktop);
    --line-height-h6: var(--line-height-h6-desktop);
    
    /* Spacing */
    --spacing-xs: 0.5rem; /* 8px */
    --spacing-sm: 1rem; /* 16px */
    --spacing-md: 1.5rem; /* 24px */
    --spacing-lg: 2.5rem; /* 40px */
    --spacing-xl: 3.75rem; /* 60px */
    --spacing-2xl: 7.5rem; /* 120px */
    
    /* Border Radius */
    --radius-sm: 0.25rem; /* 4px */
    --radius-md: 0.5rem; /* 8px */
    --radius-lg: 1.25rem; /* 20px */
    --radius-xl: 1.5rem; /* 24px */
    --radius-full: 50rem; /* 800px - essentially full radius */
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* Container */
    --container-max-width: 1440px;
    --container-padding: 2.5rem; /* 40px */
    --container-padding-mobile: 1rem; /* 16px */
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    
    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* Backdrop Filter */
    --backdrop-blur: blur(32px);
}

/* Responsive Typography */
@media (max-width: 768px) {
    :root {
        /* Switch to mobile heading sizes */
        --font-size-h1: var(--font-size-h1-mobile);
        --font-size-h2: var(--font-size-h2-mobile);
        --font-size-h3: var(--font-size-h3-mobile);
        --font-size-h4: var(--font-size-h4-mobile);
        --font-size-h5: var(--font-size-h5-mobile);
        --font-size-h6: var(--font-size-h6-mobile);
        
        /* Switch to mobile line heights */
        --line-height-h1: var(--line-height-h1-mobile);
        --line-height-h2: var(--line-height-h2-mobile);
        --line-height-h3: var(--line-height-h3-mobile);
        --line-height-h4: var(--line-height-h4-mobile);
        --line-height-h5: var(--line-height-h5-mobile);
        --line-height-h6: var(--line-height-h6-mobile);
        
        --container-padding: var(--container-padding-mobile);
    }
}