/* 
 * CryptoAgent - Premium Design Tokens
 * World-class mobile-first design system for Solana DApps
 */

:root {
    /* ===== COLOR PALETTE - DEEP SPACE NEON ===== */
    --bg-base: #030305;
    --bg-surface: #0a0a12;
    --bg-surface-elevated: #12121f;
    --bg-card: rgba(18, 18, 31, 0.7);

    /* Neon Accent Colors */
    --accent-primary: #00ffa3;
    --accent-secondary: #a855f7;
    --accent-tertiary: #00d4ff;
    --accent-glow: rgba(0, 255, 163, 0.5);
    --accent-glow-purple: rgba(168, 85, 247, 0.4);

    /* Premium Multi-Stop Gradients */
    --grad-premium: linear-gradient(135deg, #00ffa3 0%, #00d4ff 50%, #a855f7 100%);
    --grad-neon-border: linear-gradient(135deg, rgba(0, 255, 163, 0.6) 0%, rgba(168, 85, 247, 0.6) 100%);
    --grad-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
    --grad-card-shine: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    --grad-glow-orb: radial-gradient(circle, rgba(0, 255, 163, 0.15) 0%, transparent 70%);

    /* Semantic Colors */
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;

    /* Text Hierarchy */
    --text-high: #f8fafc;
    --text-mid: #94a3b8;
    --text-low: #64748b;
    --text-muted: #475569;

    /* ===== GLASSMORPHISM ===== */
    --glass-bg: rgba(10, 10, 18, 0.75);
    --glass-bg-light: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-active: rgba(0, 255, 163, 0.3);
    --glass-blur: blur(16px);
    --glass-blur-heavy: blur(24px);

    /* ===== SPACING & SHAPES ===== */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    /* Safe Areas */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);

    /* ===== SHADOWS & GLOWS ===== */
    --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 255, 163, 0.03);
    --shadow-neon: 0 0 30px var(--accent-glow);
    --shadow-neon-purple: 0 0 30px var(--accent-glow-purple);
    --shadow-float: 0 20px 50px rgba(0, 0, 0, 0.6);

    /* ===== TRANSITIONS & ANIMATIONS ===== */
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    --transition-spring: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Animation Durations - Optimized for Mobile */
    --duration-instant: 100ms;
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    /* ===== MOBILE TOUCH INTERACTIONS ===== */
    /* Touch Feedback */
    --touch-scale-active: 0.96;
    --touch-opacity-active: 0.8;
    --touch-feedback-duration: 100ms;

    /* Touch Target Sizes */
    --touch-target-min: 44px;
    --touch-spacing-min: 8px;

    /* Haptic Timing (for future implementation) */
    --haptic-light: 10ms;
    --haptic-medium: 20ms;
    --haptic-heavy: 30ms;

    /* Pull-to-Refresh */
    --pull-threshold: 80px;
    --pull-resistance: 2.5;

    /* Swipe Gestures */
    --swipe-threshold: 50px;
    --swipe-velocity: 0.3;
}