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

:root {
    --color-light: #ffffff;
    --color-dark: #171717;
}

.accent-text {
    @apply text-slate-600 dark:text-slate-400;
}

body {
    font-family: "Inter Variable",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
    color: var(--color-dark);
    background: var(--color-light);
}

.dark body {
    color: #f3f4f6;
    background: #111827;
}

/* only use this to update the style of the auth input fields. use a different class for all other input fields */
.auth-input-field {
    @apply w-full px-4 py-3 rounded-container bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-shadow shadow-sm hover:shadow text-gray-900 dark:text-gray-100;
}

/* only use this to update the style of the auth buttons. use the button class for all other buttons */
.auth-button {
    @apply w-full px-4 py-3 rounded bg-primary text-white font-semibold hover:bg-primary-hover transition-colors shadow-sm hover:shadow disabled:opacity-50 disabled:cursor-not-allowed;
}

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar {
    width: 8px;
}

.dark ::-webkit-scrollbar-track {
    background: #374151;
}

.dark ::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Landing page animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

/* Gradient text animation */
@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
}

/* Backdrop blur enhancement */
.backdrop-blur-xl {
    backdrop-filter: blur(24px);
}

/* Custom shadow utilities */
.shadow-3xl {
    box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.25);
}

.shadow-glow {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.shadow-glow-purple {
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
}

/* Fix SignOutButton in dark mode */
.dark button[class*="bg-white"] {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
    border-color: #4b5563 !important;
}

.dark button[class*="bg-white"]:hover {
    background-color: #4b5563 !important;
    color: #f9fafb !important;
}

/* Animations for interactive demo */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slideIn {
    animation: slideIn 0.4s ease-out forwards;
}

/* Professional Landing Page Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInRotate {
    from {
        opacity: 0;
        transform: translateY(30px) rotate(-5deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(50px);
    }
    50% {
        transform: scale(1.05) translateY(-10px);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fadeInDown {
    animation: fadeInDown 0.8s ease-out forwards;
}

.animate-fadeInLeft {
    animation: fadeInLeft 0.8s ease-out forwards;
}

.animate-fadeInRight {
    animation: fadeInRight 0.8s ease-out forwards;
}

.animate-scaleIn {
    animation: scaleIn 0.6s ease-out forwards;
}

.animate-fadeIn {
    animation: fadeIn 1s ease-out forwards;
}

.animate-slideInRotate {
    animation: slideInRotate 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-bounceIn {
    animation: bounceIn 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}