/* font */
*{
  font-family: "Saira", sans-serif;
  font-optical-sizing: auto;
  font-variation-settings:
    "wdth" 100;
}
/* Custom styles can go here. Tailwind is largely self-sufficient. */
@import "tailwindcss";
/* Example for the badges and buttons if not fully satisfied with inline Tailwind */

.badge {
    @apply bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm font-medium px-3 py-1 rounded-full shadow-md;
}

.tech-badge {
    @apply bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-2.5 py-0.5 rounded-full;
}

.btn-primary {
    @apply inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition-all duration-300;
}

.btn-secondary {
    @apply inline-block border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition-all duration-300 dark:border-blue-400 dark:text-blue-400 dark:hover:bg-blue-400 dark:hover:text-gray-900;
}

/* Animations for fade-in and fade-up (optional, can be in JS or here) */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animations for Hero Section elements */
@keyframes fadeInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-in-up {
    animation: fadeInFromTop 0.8s ease-out forwards;
}
.animate-fade-in-up.delay-100 { animation-delay: 0.1s; }
.animate-fade-in-up.delay-200 { animation-delay: 0.2s; }
.animate-fade-in-up.delay-300 { animation-delay: 0.3s; }

.dashboard-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.10), transparent 30%),
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 24%),
        linear-gradient(180deg, #f8fbff 0%, #f3f7fb 55%, #eef2f7 100%);
    color: #0f172a;
}

.dashboard-panel {
    @apply rounded-3xl border border-slate-200 bg-white/90 shadow-xl backdrop-blur-xl;
}

.dashboard-label {
    @apply mb-2 block text-sm font-semibold text-slate-700;
}

.dashboard-input {
    @apply block w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400 shadow-sm transition focus:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-400/30;
}

.dashboard-action-primary {
    @apply inline-flex items-center justify-center rounded-2xl bg-sky-500 px-4 py-3 text-sm font-semibold text-white transition hover:bg-sky-600;
}

.dashboard-action-secondary {
    @apply inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm font-semibold text-slate-700 transition hover:border-sky-300 hover:bg-sky-50;
}

.dashboard-pill {
    @apply rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold text-slate-700;
}