@import "tailwindcss";

/* 
 * globals.css — Minimal layer
 * The main design system is loaded from /assets/css/legacy.css (extracted from original 1414crypto project).
 * This file only contains the Tailwind import and supplementary overrides.
 */

/* ═══ TAILWIND v4 OPACITY FIXES ═══ */
/* Tailwind v4 color-mix() opacity modifiers can fail to render on some builds.
   These manual rgba overrides guarantee correct rendering. */

/* Glass backgrounds */
.bg-white\/3 { background-color: rgba(255,255,255,0.03) !important; }
.bg-white\/4 { background-color: rgba(255,255,255,0.04) !important; }
.bg-white\/5 { background-color: rgba(255,255,255,0.05) !important; }
.bg-white\/6 { background-color: rgba(255,255,255,0.06) !important; }
.bg-white\/8 { background-color: rgba(255,255,255,0.08) !important; }
.bg-white\/10 { background-color: rgba(255,255,255,0.10) !important; }

/* Borders */
.border-white\/3 { border-color: rgba(255,255,255,0.03) !important; }
.border-white\/4 { border-color: rgba(255,255,255,0.04) !important; }
.border-white\/5 { border-color: rgba(255,255,255,0.05) !important; }
.border-white\/6 { border-color: rgba(255,255,255,0.06) !important; }
.border-white\/8 { border-color: rgba(255,255,255,0.08) !important; }
.border-white\/10 { border-color: rgba(255,255,255,0.10) !important; }
.border-white\/15 { border-color: rgba(255,255,255,0.15) !important; }
.border-white\/20 { border-color: rgba(255,255,255,0.20) !important; }

/* Hover states */
.hover\:bg-white\/5:hover { background-color: rgba(255,255,255,0.05) !important; }
.hover\:bg-white\/6:hover { background-color: rgba(255,255,255,0.06) !important; }
.hover\:bg-white\/8:hover { background-color: rgba(255,255,255,0.08) !important; }
.hover\:bg-white\/10:hover { background-color: rgba(255,255,255,0.10) !important; }
.hover\:bg-white\/1:hover { background-color: rgba(255,255,255,0.01) !important; }
.hover\:border-white\/10:hover { border-color: rgba(255,255,255,0.10) !important; }
.hover\:border-white\/15:hover { border-color: rgba(255,255,255,0.15) !important; }
.hover\:border-white\/20:hover { border-color: rgba(255,255,255,0.20) !important; }

/* Blue accents */
.bg-blue-500\/5  { background-color: rgba(59,130,246,0.05) !important; }
.bg-blue-500\/8  { background-color: rgba(59,130,246,0.08) !important; }
.bg-blue-500\/10 { background-color: rgba(59,130,246,0.10) !important; }
.border-blue-500\/20 { border-color: rgba(59,130,246,0.20) !important; }
.hover\:bg-blue-500\/5:hover { background-color: rgba(59,130,246,0.05) !important; }
.focus-within\:border-blue-500\/50:focus-within { border-color: rgba(59,130,246,0.50) !important; }

/* Indigo accents */
.bg-indigo-500\/10 { background-color: rgba(99,102,241,0.10) !important; }
.border-indigo-500\/20 { border-color: rgba(99,102,241,0.20) !important; }
.border-indigo-500\/25 { border-color: rgba(99,102,241,0.25) !important; }

/* Emerald accents */
.bg-emerald-500\/10 { background-color: rgba(16,185,129,0.10) !important; }
.border-emerald-500\/20 { border-color: rgba(16,185,129,0.20) !important; }

/* Red accents */
.bg-red-500\/6  { background-color: rgba(239,68,68,0.06) !important; }
.bg-red-500\/10 { background-color: rgba(239,68,68,0.10) !important; }
.hover\:bg-red-500\/12:hover { background-color: rgba(239,68,68,0.12) !important; }
.hover\:bg-red-500\/20:hover { background-color: rgba(239,68,68,0.20) !important; }
.border-red-500\/10 { border-color: rgba(239,68,68,0.10) !important; }
.border-red-500\/15 { border-color: rgba(239,68,68,0.15) !important; }
.border-red-500\/20 { border-color: rgba(239,68,68,0.20) !important; }
.hover\:border-red-500\/20:hover { border-color: rgba(239,68,68,0.20) !important; }
.hover\:border-red-500\/30:hover { border-color: rgba(239,68,68,0.30) !important; }

/* Amber accents */
.bg-amber-500\/10 { background-color: rgba(245,158,11,0.10) !important; }
.border-amber-500\/10 { border-color: rgba(245,158,11,0.10) !important; }
.border-amber-500\/30 { border-color: rgba(245,158,11,0.30) !important; }

/* Purple accents */
.bg-purple-500\/10 { background-color: rgba(139,92,246,0.10) !important; }
.bg-purple-500\/15 { background-color: rgba(139,92,246,0.15) !important; }
.border-purple-500\/20 { border-color: rgba(139,92,246,0.20) !important; }

/* Cyan accents */
.bg-cyan-500\/10 { background-color: rgba(6,182,212,0.10) !important; }

/* BNB golden */
.bg-\[\#f3ba2f\]\/10 { background-color: rgba(243,186,47,0.10) !important; }
.border-\[\#f3ba2f\]\/15 { border-color: rgba(243,186,47,0.15) !important; }

/* ═══ ARBITRARY HEX + OPACITY ═══ */
.bg-\[\#111827\]\/70 { background-color: rgba(17, 24, 39, 0.70) !important; }
.bg-\[\#111827\]\/80 { background-color: rgba(17, 24, 39, 0.80) !important; }
.bg-\[\#171f2f\]\/70 { background-color: rgba(23, 31, 47, 0.70) !important; }
.bg-\[\#0c0f1b\]\/60 { background-color: rgba(12, 15, 27, 0.60) !important; }
.bg-\[\#0c0f1b\]\/80 { background-color: rgba(12, 15, 27, 0.80) !important; }
.bg-\[\#0a0e17\]\/85 { background-color: rgba(10, 14, 23, 0.85) !important; }
.bg-\[\#0a0e17\]\/30 { background-color: rgba(10, 14, 23, 0.30) !important; }

/* ═══ BLUR OVERRIDES ═══ */
.blur-\[80px\]  { filter: blur(80px) !important; }
.blur-\[100px\] { filter: blur(100px) !important; }

/* ═══ BACKDROP FILTER ═══ */
.backdrop-blur-sm  { -webkit-backdrop-filter: blur(4px);  backdrop-filter: blur(4px); }
.backdrop-blur-md  { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.backdrop-blur-lg  { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.backdrop-blur-xl  { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }

/* ═══ SHADOWS ═══ */
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5) !important; }
.shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3), 0 8px 10px -6px rgba(0,0,0,0.2) !important; }
.shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -4px rgba(0,0,0,0.15) !important; }

/* ═══ ANIMATIONS ═══ */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.float-anim { animation: float 6s ease-in-out infinite; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.pulse-dot { animation: pulse-dot 2s infinite; }

@keyframes orb-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -20px); }
}
.orb-anim { animation: orb-float 8s ease-in-out infinite; }

@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-scroll-anim { animation: ticker-scroll 30s linear infinite; }

@keyframes ddSlideIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.dd-slide-in { animation: ddSlideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.toast-notification { animation: ddSlideIn 0.3s ease; }

/* ═══ DROP SHADOW ═══ */
.drop-shadow-\[0_0_15px_rgba\(99\,102\,241\,0\.2\)\] {
  filter: drop-shadow(0 0 15px rgba(99,102,241,0.2));
}
.drop-shadow-\[0_0_10px_rgba\(99\,102\,241\,0\.2\)\] {
  filter: drop-shadow(0 0 10px rgba(99,102,241,0.2));
}

/* ═══ GROUP HOVER ═══ */
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }

/* ═══ MARKETPLACE CARD HOVER ═══ */
.trending-card:hover {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(99,102,241,0.2) !important;
    transform: scale(1.02);
    box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}

/* SWITCH BUTTON HOVER */
#btn-switch-direction {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#btn-switch-direction:hover {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}
#btn-switch-direction:hover i::before {
    content: "\f362" !important;
}
#btn-switch-direction:hover i {
    transform: rotate(90deg);
    display: inline-block;
}