:root {
    /* Colors */
    --color-bg: #050505;
    --color-surface: #0a0a0a;
    --color-surface-hover: #141414;
    --color-text: #ffffff;
    --color-text-muted: #888888;
    --color-accent-cyan: #00F0FF;
    --color-accent-red: #FF3B30;

    /* Typography */
    --font-primary: 'Outfit', sans-serif;
    --font-secondary: 'Inter', sans-serif;

    /* Spacing */
    --gap-sm: 1rem;
    --gap-md: 2rem;
    --gap-lg: 4rem;
    --gap-xl: 8rem;

    /* Dimensions */
    --container-width: 1600px;
    --header-height: 80px;

    /* Transitions */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.3s var(--ease-out-expo);
    --transition-slow: 0.8s var(--ease-out-expo);

    /* Textures */
    --noise-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}