/* Beetler.ai Design Tokens */
:root {
    /* Brand gradient colors */
    --color-purple: #AE52F2;
    --color-blue: #3EB3FC;
    --color-turquoise: #41E3CA;
    --gradient-brand: linear-gradient(135deg, #AE52F2 0%, #3EB3FC 50%, #41E3CA 100%);
    --gradient-brand-hover: linear-gradient(135deg, #BE62FF 0%, #4EC3FF 50%, #51F9DA 100%);

    /* Backgrounds */
    --bg-primary: #0F1225;
    --bg-secondary: #101428;
    --bg-elevated: #1a1d35;
    --bg-card: #1e2140;
    --bg-card-hover: #252850;

    /* Text */
    --text-primary: #FAFAFA;
    --text-secondary: #E3E4E6;
    --text-muted: #8b92a5;

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.15);

    /* Typography */
    --font-primary: 'Century Gothic', CenturyGothic, AppleGothic, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 40px rgba(174, 82, 242, 0.15);

    /* Layout */
    --max-width: 1200px;
    --max-width-narrow: 800px;
    --nav-height: 80px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;
}