/* ==========================================================================
   CSS Variables - Design Tokens
   ========================================================================== */

:root {
    /* BRAND COLORS */
    --brand-blue: #3B82F6;
    --brand-blue-light: #5CA4F8;
    --brand-cyan: #0ea5e9;

    /* DARK PALETTE */
    --bg-color: #09090F;
    --surface-color: #0E0E18;
    --surface-hover: #161621;

    /* TEXT COLORS */
    --text-primary: #FFFFFF;
    --text-secondary: #94A3B8;

    /* ACCENTS */
    --accent-gradient: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-light) 100%);
    --glow-shadow: 0 0 32px rgba(59, 130, 246, 0.15);

    /* BORDERS */
    --border-light: rgba(255, 255, 255, 0.07);

    /* TYPOGRAPHY */
    --font-main: 'Outfit', sans-serif;

    /* LAYOUT */
    --max-width: 1200px;
    --header-height: 80px;

    /* TRANSITIONS */
    --transition: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 0.3s ease;
    --transition-medium: 0.4s ease;

    /* SPACING */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 60px;
    --space-2xl: 80px;
    --space-3xl: 120px;

    /* BORDER RADIUS */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 24px;
}