/* CSS Custom Properties */
:root {
    /* Colors */
    --color-brand-dark: #071526;
    --color-brand-navy: #0a1a30;
    --color-brand-blue: #0f1f35;
    --color-brand-theme: #0a192f;
    --color-white: #ffffff;
    --color-white-90: rgba(255, 255, 255, 0.9);
    --color-white-80: rgba(255, 255, 255, 0.8);
    --color-white-70: rgba(255, 255, 255, 0.7);
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-white-05: rgba(255, 255, 255, 0.05);
    
    /* Typography */
    --font-outfit: 'Outfit', sans-serif;
    --font-crimson: 'Crimson Text', serif;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Borders */
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 1rem;
    --border-radius-full: 9999px;
    
    /* Shadows */
    --shadow-glow: 0 0 8px rgba(255, 255, 255, 0.15);
    --shadow-glow-hover: 0 0 12px rgba(255, 255, 255, 0.25);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Crimson Text';
    src: url('../fonts/CrimsonText-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Outfit', sans-serif;
    background: 
        radial-gradient(circle at 50% 50%, var(--color-brand-dark) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, var(--color-brand-navy) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, var(--color-brand-blue) 0%, transparent 30%),
        var(--color-brand-dark);
    background-attachment: fixed;
}

/* Enhanced link styling */
.prose a {
    color: var(--color-white-90) !important;
    font-weight: 350 !important;
    text-shadow: var(--shadow-glow);
    transition: var(--transition-fast);
}

.prose a:hover {
    color: var(--color-white) !important;
    text-shadow: var(--shadow-glow-hover);
    border-bottom-color: var(--color-white-20) !important;
}

.crimson-text {
    font-family: var(--font-crimson);
}