@import url('../css pages/global.css');

/* ═══════════════════════════════════════════════════
   VARIABLES & BASE
═══════════════════════════════════════════════════ */

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--bg-main);
    overflow-x: hidden;
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ═══════════════════════════════════════════════════
   DARK MODE - TEXTES
═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   DARK MODE - BACKGROUNDS
═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   DARK MODE - BORDERS
═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   DARK MODE - SHADOWS
═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   MESH BACKGROUND
═══════════════════════════════════════════════════ */
.bg-mesh {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    background-color: var(--bg-main);
    background-image:
        radial-gradient(at 0% 0%,   var(--mesh-1) 0px, transparent 50%),
        radial-gradient(at 100% 0%, var(--mesh-2) 0px, transparent 50%),
        radial-gradient(at 50% 100%, var(--mesh-3) 0px, transparent 50%);
    transition: all 0.3s ease;
}

/* ═══════════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   BUTTON
═══════════════════════════════════════════════════ */
.btn-premium {
    position: relative;
    background: #1e1b4b;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-premium::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.5s;
}

.btn-premium:hover::before { left: 100%; }

.btn-premium:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 40px rgba(79, 70, 229, 0.25);
    background: #4f46e5;
}

/* ═══════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes float-slow {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50%       { transform: translate(-10px, -20px) rotate(2deg); }
}

/* ═══════════════════════════════════════════════════
   CARD
═══════════════════════════════════════════════════ */
.glass-card { transition: all 0.3s ease; }

/* ═══════════════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #6366f1; }
body.dark-theme ::-webkit-scrollbar-thumb       { background: #475569; }
body.dark-theme ::-webkit-scrollbar-thumb:hover { background: #6366f1; }

/* ═══════════════════════════════════════════════════
   LOGO
═══════════════════════════════════════════════════ */