@tailwind base;
@tailwind components;
@tailwind utilities;

/* ==========================================================================
   1. SOVEREIGN DESIGN TOKENS & SYSTEM VARS
   ========================================================================== */
:root {
    --sov-blue: #2563EB;
    --sov-emerald: #059669;
    --sov-rose: #E11D48;
    --sov-slate-900: #0F172A;
    --sov-slate-800: #1E293B;
    --transition-speed: 0.4s;
    --ease-ios: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. GLOBAL RESET & NEURAL THEME SYNC
   ========================================================================== */
.theme-transition,
.theme-transition *,
.theme-transition *:before,
.theme-transition *:after {
    transition: all var(--transition-speed) var(--ease-ios) !important;
    transition-delay: 0s !important;
}

body {
    @apply antialiased subpixel-antialiased overflow-x-hidden bg-sov-slate-50 dark:bg-sov-slate-900 text-sov-slate-900 dark:text-white;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
    user-select: none; /* Prevents text selection on UI elements for PWA feel */
}

/* Allow text selection in inputs and specific content */
input, textarea, p, h1, h2, h3, h4 { user-select: text; }

/* ==========================================================================
   3. ADAPTIVE NAVIGATION & SIDEBARS
   ========================================================================== */
.nav-btn {
    @apply flex items-center gap-4 px-6 py-4 rounded-2xl font-bold text-xs tracking-widest uppercase transition-all duration-300;
}

/* Active state for Dashboard Sidebars */
.nav-btn.active {
    @apply bg-sov-blue text-white shadow-xl shadow-sov-blue/20 opacity-100;
}

/* Bottom Nav Active State for Mobile */
.nav-node.active-protocol i {
    @apply text-sov-blue scale-110;
}

/* ==========================================================================
   4. GLASSMORPHISM & DEPTH
   ========================================================================== */
.glass-node {
    @apply bg-white/75 dark:bg-sov-slate-900/80 backdrop-blur-2xl border border-white/20 dark:border-white/5;
}

.glass-card {
    @apply bg-white/90 dark:bg-sov-slate-800/60 backdrop-blur-xl border border-slate-100 dark:border-white/5 shadow-sm transition-all duration-500;
}

.glass-card:hover {
    @apply shadow-2xl border-sov-blue/20 -translate-y-1;
}

/* ==========================================================================
   5. SOVEREIGN ANIMATION SUITE
   ========================================================================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.animate-fade-in { animation: fadeInUp 0.5s var(--ease-ios) forwards; }
.animate-scale-in { animation: scaleIn 0.4s var(--ease-ios) forwards; }

/* High-End Skeleton Loader Effect */
.shimmer {
    background: linear-gradient(to right, #f1f5f9 8%, #f8fafc 18%, #f1f5f9 33%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
}

.dark .shimmer {
    background: linear-gradient(to right, #1e293b 8%, #334155 18%, #1e293b 33%);
    background-size: 1000px 100%;
}

/* ==========================================================================
   6. INTERACTION LOGIC
   ========================================================================== */
.active-node:active { 
    transform: scale(0.96); 
    transition: transform 0.1s var(--ease-ios); 
}

/* Input Handshakes */
input:focus, select:focus, textarea:focus {
    @apply outline-none ring-4 ring-sov-blue/10 border-sov-blue transition-all duration-300;
}

/* ==========================================================================
   7. UTILITY NODES
   ========================================================================== */

/* Modern Scrollbar Sync */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { @apply bg-transparent; }
::-webkit-scrollbar-thumb { @apply bg-sov-slate-300/20 rounded-full hover:bg-sov-blue/40; }

/* Hide Scrollbar for clean UI strips */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Product Image Mask */
.asset-mask {
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

/* Investor Spotlight Text */
.text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-sov-blue to-sov-emerald font-black;
}

/* Dashboard Tab Underscore */
.active-tab-line {
    @apply relative after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-sov-blue;
}