/**
 * Cyber-Vault RWA - Core Theme & Visual Effects Stylesheet
 * Architecture: Modular CSS separation for enterprise clean code
 */

:root {
    --vault-bg: #0B0E14;
    --vault-card: #0D1117;
    --vault-card-elevated: #111622;
    --vault-border: #1E2638;
    --vault-border-light: rgba(30, 38, 56, 0.7);
    --vault-muted: #161B22;

    --cyber-green: #10B981;
    --cyber-green-glow: #059669;
    --cyber-green-dim: rgba(16, 185, 129, 0.15);
    
    --cyber-blue: #3B82F6;
    --cyber-blue-glow: #2563EB;
    --cyber-blue-dim: rgba(59, 130, 246, 0.15);

    --cyber-purple: #A855F7;
    --cyber-purple-dim: rgba(168, 85, 247, 0.15);

    --cyber-amber: #F59E0B;
    --cyber-amber-dim: rgba(245, 158, 11, 0.15);

    --cyber-danger: #EF4444;
}

/* ==========================================================================
   Base & Global Background Grid
   ========================================================================== */
body {
    background-color: var(--vault-bg);
    color: #E2E8F0;
    font-family: 'Inter', sans-serif;
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(16, 185, 129, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 85% 85%, rgba(59, 130, 246, 0.04) 0%, transparent 40%),
        linear-gradient(rgba(30, 38, 56, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 38, 56, 0.2) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
}

/* ==========================================================================
   Cyber Card Architecture
   ========================================================================== */
.cyber-card {
    background-color: var(--vault-card);
    border: 1px solid var(--vault-border);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.cyber-card-elevated {
    background-color: var(--vault-card-elevated);
    border: 1px solid var(--vault-border);
    border-radius: 12px;
}

.cyber-card-interactive:hover {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.1);
}

/* ==========================================================================
   Neon Borders & Glow Accents
   ========================================================================== */
.neon-border-green {
    border: 1px solid rgba(16, 185, 129, 0.35);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
}

.neon-border-blue {
    border: 1px solid rgba(59, 130, 246, 0.35);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.15);
}

.neon-border-purple {
    border: 1px solid rgba(168, 85, 247, 0.35);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.15);
}

.neon-border-amber {
    border: 1px solid rgba(245, 158, 11, 0.35);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.12);
}

/* ==========================================================================
   Custom Cyber Scrollbar
   ========================================================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--vault-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--vault-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cyber-green);
}