:root{

   /* Typography */

    @font-face{
        font-family: 'LTAspireNeue'; 
        src: url('fonts/LTAspireNeue-Bold.woff2') format('woff2'); 
        font-weight: bold; 
        font-style: normal;
    }

    @font-face{
        font-family: 'RobotoFlex'; 
        src: url('fonts/RobotoFlex-Regular.woff2') format('woff2'); 
        font-weight: normal;
        font-style: normal;
    }


    --font-title:'LT ASpire', sans-serif;
    --font-body:'Roboto-Flex', sans-serif;
    
    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;
    
    /* Line Heights */
    --leading-tight: 1.2;
    --leading-normal: 1.6;
    --leading-relaxed: 1.8;

      /* Primary Colors */
    --color-black: #0A0A0A;
    --color-black-light: #141414;
    --color-black-lighter: #1a1a1a;
    --color-white: #FFFFFF;
    --color-gray: #888888;
    --color-blue: #0066ff;
    --color-blue-dark: #060153;
    --color-blue-light: #3385ff;
    --color-red: #AF191A;
    --color-red-dark: #340403;
    --color-red-light: #f67575;
    
    /* Secondary Colors */
    --color-gray-dark: #1A1A1A;
    --color-gray-light: #cccccc;
    --color-gray-medium: #333333;
    --color-gray-text: #888888;
    
    /* Gradients */
    --gradient-blue: linear-gradient(135deg, #0A84FF 0%, #0066CC 100%);
    --gradient-dark: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.9) 100%);
    --gradient-overlay: linear-gradient(135deg, rgba(10, 132, 255, 0.1) 0%, rgba(10, 10, 10, 0.8) 100%);
    
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Shadows */

    --shadow-md: 0 4px 20px rgba(0,0,0,0.2);
    --shadow-glow: 0 0 12px rgba(255,255,255,0.15);
    --shadow-glow-strong: 0 0 18px rgba(10,132,255,0.25);
    --shadow-blue-glow: 0 0 16px rgba(10,132,255,0.18);
    --shadow-red-glow: 0 0 16px rgba(175,25,26,0.18);
    --shadow-black-glow:  0 10px 30px rgba(0,0,0,0.35);

    /* Z-Index Scale */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    

    /* Container */
    --container-max: 1280px;
    --container-padding: 1.5rem;


    /* Motion System */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

    --transition-fast: 150ms var(--ease-standard);
    --transition-base: 300ms var(--ease-standard);
    --transition-slow: 500ms var(--ease-standard);


    /* Common Transition Presets */
    --transition-transform:
        transform var(--transition-base);

    --transition-fade:
        opacity var(--transition-base);

    --transition-interactive:
        transform var(--transition-base),
        opacity var(--transition-base),
        border-color var(--transition-base),
        background-color var(--transition-base),
        color var(--transition-base),
        box-shadow var(--transition-base);
}

/* Dark mode is default */
@media (prefers-color-scheme: light) {
    :root {
        --color-black: #0A0A0A;
        --color-white: #FFFFFF;
    }
}