@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

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

/* ======================================================
   BASE
====================================================== */

@layer base {

    html {
        font-family: "Inter", sans-serif;
        scroll-behavior: smooth;
    }

    body {
        @apply bg-slate-950 text-slate-100;
    }

}

/* ======================================================
   COMPONENTS
====================================================== */

@layer components {

    .card {
        @apply bg-slate-900/70 border border-white/10 rounded-3xl shadow-2xl p-6;
    }

    .btn-primary {

        @apply inline-flex items-center justify-center
        rounded-xl
        px-8
        py-3.5
        font-semibold
        text-white
        transition-all
        duration-300;

        background: linear-gradient(135deg,#06b6d4,#2563eb);

        box-shadow:
            0 10px 30px rgba(37,99,235,.35);

    }

    .btn-primary:hover{

        transform:
            translateY(-3px)
            scale(1.02);

        box-shadow:
            0 20px 45px rgba(37,99,235,.45);

    }

    .btn-secondary{

        @apply inline-flex items-center justify-center
        rounded-xl
        px-8
        py-3.5
        font-semibold
        text-white
        transition-all
        duration-300;

        background:rgba(255,255,255,.05);

        border:1px solid rgba(255,255,255,.12);

        backdrop-filter:blur(12px);

    }

    .btn-secondary:hover{

        background:rgba(255,255,255,.10);

        transform:translateY(-2px);

    }

    .input-modern{

        @apply w-full
        rounded-xl
        px-4
        py-3
        text-white
        placeholder-slate-400
        outline-none;

        background:rgba(255,255,255,.05);

        border:1px solid rgba(255,255,255,.08);

    }

    .input-modern:focus{

        border-color:#38bdf8;

        box-shadow:
            0 0 0 4px rgba(56,189,248,.12),
            0 0 30px rgba(37,99,235,.15);

    }

}

/* ======================================================
   OCEAN
====================================================== */

.ocean-light{

    background:

        radial-gradient(circle at 15% -10%,
            rgba(255,255,255,.20),
            transparent 35%
        ),

        radial-gradient(circle at 50% -20%,
            rgba(255,255,255,.12),
            transparent 40%
        ),

        radial-gradient(circle at 85% -10%,
            rgba(255,255,255,.18),
            transparent 35%
        );

    animation:oceanLight 12s ease-in-out infinite alternate;

    pointer-events:none;

}

@keyframes oceanLight{

    from{

        transform:
            translateY(-18px);

        opacity:.65;

    }

    to{

        transform:
            translateY(18px);

        opacity:1;

    }

}

/* ======================================================
   GLASS
====================================================== */

.glass{

    background: rgba(15, 23, 42, 0.35);

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

    box-shadow:
        0 30px 80px rgba(0,0,0,.45),
        inset 0 1px 1px rgba(255,255,255,.08);

}

/* ======================================================
   LIZ LOGO GLOW
====================================================== */

.logo-glow{

    text-shadow:

        0 0 12px rgba(34,211,238,.55),

        0 0 28px rgba(34,211,238,.35),

        0 0 55px rgba(34,211,238,.18);

}

/* ======================================================
   FLOAT
====================================================== */

.float-card{

    animation:
        floatCard 6s ease-in-out infinite;

}

@keyframes floatCard{

    0%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(-8px);

    }

    100%{

        transform:
            translateY(0);

    }

}

/* ======================================================
   SELECTION
====================================================== */

::selection{

    background:#22d3ee;

    color:white;

}

/* ======================================================
   TOM SELECT DARK THEME
====================================================== */

.ts-wrapper {
    width: 100%;
}

.ts-wrapper.single .ts-control {
    background: #0f172a !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 12px;
    min-height: 48px;
    color: #fff !important;
    box-shadow: none !important;
    padding: 8px 12px;
}

.ts-wrapper.single .ts-control input {
    color: #fff !important;
}

.ts-wrapper.single .ts-control input::placeholder {
    color: #94a3b8 !important;
}

.ts-dropdown {
    background: #0f172a !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 6px;
}

.ts-dropdown .option {
    color: #fff;
    padding: 12px 14px;
}

.ts-dropdown .option:hover,
.ts-dropdown .active {
    background: #2563eb !important;
    color: #fff !important;
}

.ts-dropdown .selected {
    background: rgba(37,99,235,.20) !important;
    color: #fff;
}

.ts-control {
    background: #0f172a !important;
}

.ts-control,
.ts-control input {
    color: #fff !important;
}

.ts-wrapper.focus .ts-control {
    border-color: #22d3ee !important;
    box-shadow: 0 0 0 4px rgba(34,211,238,.12) !important;
}

.ts-dropdown .create {
    display: none;
}

/* ======================================================
   HERO ANIMATION
====================================================== */

.hero-item{

    opacity:0;

    transform:translateY(-35px);

    animation:heroReveal .9s ease forwards;

}

.hero-delay-1{

    animation-delay:.3s;

}

.hero-delay-2{

    animation-delay:.7s;

}

.hero-delay-3{

    animation-delay:1.1s;

}

.hero-delay-4{

    animation-delay:1.5s;

}

@keyframes heroReveal{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ======================================================
   AUTH CARD ANIMATION
====================================================== */

.auth-card{

    opacity:0;

    transform:translateY(30px);

    animation:authReveal .9s ease forwards;

}

@keyframes authReveal{

    to{

        opacity:1;

        transform:translateY(0);

    }

}
@import "./components.css";

/* ========================================
   Sidebar Scrollbar
======================================== */

.sidebar-scroll::-webkit-scrollbar{
    width:6px;
}

.sidebar-scroll::-webkit-scrollbar-track{
    background:transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb{
    background:#334155;
    border-radius:999px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover{
    background:#475569;
}

/* Firefox */
.sidebar-scroll{
    scrollbar-width:thin;
    scrollbar-color:#334155 transparent;
}