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

:root {
    /* BRAND COLORS (Blue/Purple from logo) */
    --brand-blue: #5CA4F8;
    --brand-purple: #8B5CF6;
    --brand-cyan: #22d3ee;

    /* DARK MODE PALETTE */
    --bg-color: #030406;
    --surface-color: #0A0C10;
    --surface-hover: #13161C;

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

    /* ACCENTS */
    --accent-gradient: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-purple) 100%);
    --glow-shadow: 0 0 40px rgba(92, 164, 248, 0.15);

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

    /* 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;
}