@import "tailwindcss";

@theme {
    --color-dark-900: #030712;
    --color-dark-800: #0B1121;
    --color-dark-700: #111827;
    --color-dark-600: #1e293b;
    --color-dark-500: #334155;

    --color-cyan-400: #22d3ee;
    --color-cyan-500: #06b6d4;
    --color-sky-500: #0ea5e9;
    --color-teal-400: #2dd4bf;

    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

    --animate-aurora: aurora 20s ease-in-out infinite;
    --animate-glow: glow 4s ease-in-out infinite;
    --animate-float: float 6s ease-in-out infinite;
}

/*
 * Dark luxury global styles
*/

* {
    scrollbar-width: thin;
    scrollbar-color: #1e293b #030712;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #030712; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }

::selection { background: rgba(34,211,238,0.35); color: #e2f5ff; }

/* Glassmorphism utilities */
.glass {
    background: rgba(11, 17, 33, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-strong {
    background: rgba(11, 17, 33, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(34, 211, 238, 0.1);
}

/* Animated gradient border */
.gradient-border {
    position: relative;
    border-radius: inherit;
}
.gradient-border::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, #22d3ee 0%, #2dd4bf 30%, #0ea5e9 60%, #22d3ee 100%);
    background-size: 300% 300%;
    animation: border-glow 4s ease-in-out infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

/* Glow effects */
.glow-cyan { box-shadow: 0 0 30px -5px rgba(34,211,238,0.3); }
.glow-teal { box-shadow: 0 0 30px -5px rgba(45,212,191,0.3); }

.hover-glow:hover {
    box-shadow: 0 20px 60px -15px rgba(34,211,238,0.4), 0 0 40px -10px rgba(34,211,238,0.2);
}

/* Animations */
@keyframes aurora {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(10%, 5%) rotate(120deg) scale(1.1); }
    66% { transform: translate(-10%, 10%) rotate(240deg) scale(0.95); }
}

@keyframes glow {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@keyframes border-glow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes fade-in-up {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up { animation: fade-in-up 0.6s cubic-bezier(0.16,1,0.3,1) both; }

/* Shimmer loading */
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.animate-shimmer {
    animation: shimmer 2s ease-in-out infinite;
}

/* Spotlight effect */
.spotlight {
    background: radial-gradient(800px circle at var(--x, 50%) var(--y, 50%), rgba(34,211,238,0.12), transparent 40%);
}

/* Mobile safe area */
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 8px); }

/* Page transition */
.page-enter { opacity: 0; transform: translateY(12px); }
.page-enter-active { opacity: 1; transform: translateY(0); transition: opacity 0.3s ease-out, transform 0.3s ease-out; }

/* ── Clean Light Theme ── */

/* Main backgrounds */
html.light body { background: #ffffff; color: #0f172a; }
html.light .app-shell { background: #f1f5f9 !important; }

/* Sidebar & header — pure white with shadow */
html.light aside {
    background: rgba(255,255,255,0.97) !important;
    border-right-color: #e2e8f0 !important;
    box-shadow: 2px 0 20px rgba(0,0,0,0.04) !important;
}
html.light header {
    background: rgba(255,255,255,0.95) !important;
    border-bottom-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* Glass cards — white with proper shadow */
html.light .glass {
    background: #ffffff !important;
    backdrop-filter: none;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
}
html.light .glass:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04) !important;
}
html.light .glass-strong {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* Glass cards in light mode */
html.light .glass {
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(12px);
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
html.light .glass-strong {
    background: rgba(255,255,255,0.98);
    border-color: rgba(0,0,0,0.08);
}

/* Text colors in light mode */
html.light .text-white { color: #0f172a !important; }
html.light .text-slate-300 { color: #64748b !important; }
html.light .text-slate-400 { color: #475569 !important; }
html.light .text-slate-500 { color: #64748b !important; }
html.light .text-slate-600 { color: #94a3b8 !important; }

/* Accent colors keep their vibrance */
html.light .text-cyan-400 { color: #0891b2 !important; }
html.light .text-teal-400 { color: #0d9488 !important; }
html.light .text-emerald-400 { color: #059669 !important; }
html.light .text-sky-400 { color: #0284c7 !important; }
html.light .text-purple-400 { color: #7c3aed !important; }
html.light .text-red-400 { color: #dc2626 !important; }
html.light .text-amber-400 { color: #d97706 !important; }

/* Borders */
html.light .border-white\\/5 { border-color: #f1f5f9 !important; }
html.light .border-white\\/10 { border-color: #e2e8f0 !important; }
html.light .border-white\\/20 { border-color: #cbd5e1 !important; }

/* Hover backgrounds */
html.light .bg-white\\/5 { background: #f8fafc !important; }
html.light .bg-white\\/10 { background: #f1f5f9 !important; }
html.light .hover\\:bg-white\\/5:hover,
html.light .hover\\:bg-white\\/\\[0\\.03\\]:hover { background: #f1f5f9 !important; }

/* Inputs & selects */
html.light input[class*="bg-white/"],
html.light select[class*="bg-white/"],
html.light textarea[class*="bg-white/"] { background: #f8fafc !important; border-color: #e2e8f0 !important; }

/* Dark backgrounds → white */
html.light .bg-dark-900 { background: #ffffff !important; }
html.light .bg-dark-800 { background: #f8fafc !important; }
html.light .bg-dark-700 { background: #f1f5f9 !important; }
html.light .bg-dark-600 { background: #e2e8f0 !important; }

/* Smooth theme transition */
html { transition: background-color 0.3s ease; }
html.light *, html.dark * { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease; }

/* ── Mobile-First Enhancements ── */

/* Touch-friendly: minimum tap target size */
@media (max-width: 768px) {
    button, a, [role="button"], input, select, textarea { min-height: 44px; min-width: 44px; }
    button:not(.keep-small), a.button { padding: 12px 20px !important; font-size: 14px !important; }
    input, select, textarea { font-size: 16px !important; /* prevent iOS zoom */ }
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }
    .mobile-card { border-radius: 16px !important; margin-bottom: 8px !important; }
    .mobile-full { width: 100% !important; }
}

/* Pull-to-refresh indicator */
@media (max-width: 768px) {
    .ptr-indicator {
        display: flex; align-items: center; justify-content: center;
        height: 0; overflow: hidden; transition: height 0.3s ease;
    }
    .ptr-active .ptr-indicator { height: 50px; }
}

/* Floating Action Button */
.fab {
    position: fixed; bottom: 80px; right: 16px; z-index: 60;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #22d3ee, #0891b2);
    box-shadow: 0 4px 20px rgba(34, 211, 238, 0.4);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: white; cursor: pointer; border: none; outline: none;
}
.fab:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(34, 211, 238, 0.6); }
.fab:active { transform: scale(0.95); }

/* Slide-up bottom sheet */
.bottom-sheet {
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 20px);
}

/* Swipe hint */
.swipe-hint { animation: swipeHint 2s ease-in-out infinite; }
@keyframes swipeHint {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    50% { transform: translateX(8px); opacity: 1; }
}

/* Gradient border animation (cards with gradient-border class) */
.gradient-border-animated {
    position: relative;
    border-radius: inherit;
}
.gradient-border-animated::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, #22d3ee, #2dd4bf, #0ea5e9, #22d3ee);
    background-size: 400% 400%;
    animation: gradient-border-rotate 4s ease-in-out infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.gradient-border-animated:hover::before { opacity: 1; }

@keyframes gradient-border-rotate {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Magnetic tilt effect */
.magnetic-tilt { transition: transform 0.2s ease-out; }

/* Text stagger reveal */
.stagger-text { opacity: 0; display: inline-block; }
.stagger-visible { animation: staggerReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes staggerReveal {
    0% { opacity: 0; transform: translateY(12px); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Floating badge pulse */
.float-badge { animation: floatBadge 3s ease-in-out infinite; }
@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Glow pulse */
.glow-pulse { animation: glowPulse 2.5s ease-in-out infinite; }
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 20px -5px rgba(34,211,238,0.2); }
    50% { box-shadow: 0 0 40px -5px rgba(34,211,238,0.5); }
}

/* Success reveal animation */
.success-reveal { animation: successPop 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes successPop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* Focus visible for keyboard nav */
:focus-visible { outline: 2px solid #22d3ee !important; outline-offset: 2px !important; }

/* Screen reader only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }