/* Spin88 Asia - Purple & Black Theme
   Modular Design System */

:root {
    /* Primary - Purple Spectrum */
    --primary: #8b5cf6;
    --primary-dark: #7c3aed;
    --primary-light: #a78bfa;
    --primary-glow: rgba(139, 92, 246, 0.5);
    --primary-subtle: rgba(139, 92, 246, 0.15);

    /* Background - Black & Dark */
    --bg-darkest: #030014;
    --bg-darker: #0a0618;
    --bg-dark: #120d1f;
    --bg-card: #1a1428;
    --bg-card-hover: #221b35;
    --bg-elevated: #251e38;

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #c4b5fd;
    --text-muted: #9ca3af;
    --text-subtle: #6b7280;

    /* Accents */
    --accent-cyan: #22d3ee;
    --accent-pink: #ec4899;
    --accent-gold: #fbbf24;
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;

    /* Borders */
    --border-subtle: rgba(139, 92, 246, 0.2);
    --border-default: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(139, 92, 246, 0.4);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%);
    --gradient-glow: linear-gradient(135deg, rgba(139, 92, 246, 0.4) 0%, rgba(124, 58, 237, 0.2) 100%);
    --gradient-dark: linear-gradient(180deg, #120d1f 0%, #030014 100%);
    --gradient-card: linear-gradient(145deg, #1a1428 0%, #120d1f 100%);
    --gradient-text: linear-gradient(135deg, #a78bfa 0%, #c4b5fd 100%);
    --gradient-mesh: radial-gradient(at 40% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
                     radial-gradient(at 80% 0%, rgba(124, 58, 237, 0.1) 0%, transparent 50%),
                     radial-gradient(at 0% 50%, rgba(34, 211, 238, 0.05) 0%, transparent 50%);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 30px var(--primary-glow);
    --shadow-card: 0 4px 24px rgba(139, 92, 246, 0.08);

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* Transitions */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-fast: 0.2s var(--ease-out-expo);
    --transition-normal: 0.35s var(--ease-out-expo);
    --transition-slow: 0.5s var(--ease-out-expo);

    /* Typography */
    --font-display: 'Syne', 'Outfit', sans-serif;
    --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}