@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

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

@layer base {
    :root {
        --color-primary: #6366f1;
        --color-primary-dark: #4f46e5;
        --color-secondary: #8b5cf6;
        --color-accent: #ec4899;
        --color-success: #10b981;
        --color-warning: #f59e0b;
        --color-danger: #ef4444;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Plus Jakarta Sans', sans-serif;
        @apply antialiased;
    }
}

@layer components {
    /* Buttons */
    .btn {
        @apply inline-flex items-center justify-center px-6 py-3 font-semibold rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
    }

    .btn-primary {
        @apply bg-gradient-to-r from-indigo-600 to-violet-600 text-white hover:from-indigo-700 hover:to-violet-700 focus:ring-indigo-500 shadow-lg shadow-indigo-500/30 hover:shadow-xl hover:shadow-indigo-500/40;
    }

    .btn-secondary {
        @apply bg-white text-gray-900 border-2 border-gray-200 hover:border-indigo-600 hover:text-indigo-600 focus:ring-indigo-500;
    }

    .btn-outline {
        @apply border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-600 hover:text-white focus:ring-indigo-500;
    }

    .btn-ghost {
        @apply text-gray-600 hover:text-indigo-600 hover:bg-indigo-50;
    }

    .btn-sm {
        @apply px-4 py-2 text-sm;
    }

    .btn-lg {
        @apply px-8 py-4 text-lg;
    }

    /* Cards */
    .card {
        @apply bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-lg transition-shadow duration-300;
    }

    .card-gradient {
        @apply bg-gradient-to-br from-white to-gray-50 rounded-2xl border border-gray-100 shadow-sm;
    }

    /* Inputs */
    .input {
        @apply w-full px-4 py-3 border border-gray-200 rounded-xl focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-all duration-200 outline-none;
    }

    .input-error {
        @apply border-red-500 focus:border-red-500 focus:ring-red-500/20;
    }

    /* Labels */
    .label {
        @apply block text-sm font-medium text-gray-700 mb-2;
    }

    /* Badges */
    .badge {
        @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold;
    }

    .badge-primary {
        @apply bg-indigo-100 text-indigo-700;
    }

    .badge-success {
        @apply bg-emerald-100 text-emerald-700;
    }

    .badge-warning {
        @apply bg-amber-100 text-amber-700;
    }

    .badge-danger {
        @apply bg-red-100 text-red-700;
    }

    /* Glass Effect */
    .glass {
        @apply bg-white/80 backdrop-blur-xl border border-white/20;
    }

    /* Gradient Text */
    .gradient-text {
        @apply bg-gradient-to-r from-indigo-600 via-violet-600 to-pink-600 bg-clip-text text-transparent;
    }

    /* Animated background */
    .animated-gradient {
        background: linear-gradient(-45deg, #6366f1, #8b5cf6, #ec4899, #6366f1);
        background-size: 400% 400%;
        animation: gradient 15s ease infinite;
    }

    @keyframes gradient {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    /* Floating animation */
    .float {
        animation: float 6s ease-in-out infinite;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
    }

    /* Pulse glow */
    .pulse-glow {
        animation: pulse-glow 2s ease-in-out infinite;
    }

    @keyframes pulse-glow {
        0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); }
        50% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.6); }
    }

    /* Platform colors */
    .platform-facebook { @apply bg-[#1877F2] text-white; }
    .platform-instagram { @apply bg-gradient-to-br from-[#833AB4] via-[#E1306C] to-[#F77737] text-white; }
    .platform-twitter { @apply bg-black text-white; }
    .platform-linkedin { @apply bg-[#0A66C2] text-white; }
    .platform-tiktok { @apply bg-black text-white; }
    .platform-youtube { @apply bg-[#FF0000] text-white; }

    /* Sidebar */
    .sidebar-item {
        @apply flex items-center gap-3 px-4 py-3 rounded-xl text-gray-600 hover:bg-indigo-50 hover:text-indigo-600 transition-all duration-200;
    }

    .sidebar-item.active {
        @apply bg-indigo-100 text-indigo-700 font-semibold;
    }

    /* Calendar */
    .calendar-day {
        @apply aspect-square flex flex-col items-start justify-start p-2 rounded-lg border border-gray-100 hover:border-indigo-300 transition-colors cursor-pointer;
    }

    .calendar-day.today {
        @apply border-indigo-500 bg-indigo-50;
    }

    .calendar-day.has-events {
        @apply bg-gradient-to-br from-indigo-50 to-violet-50;
    }

    /* Content Type Icons */
    .content-icon {
        @apply w-10 h-10 rounded-xl flex items-center justify-center;
    }

    .content-icon.social {
        @apply bg-pink-100 text-pink-600;
    }

    .content-icon.blog {
        @apply bg-blue-100 text-blue-600;
    }

    .content-icon.newsletter {
        @apply bg-amber-100 text-amber-600;
    }

    .content-icon.ad {
        @apply bg-emerald-100 text-emerald-600;
    }
}

@layer utilities {
    .text-balance {
        text-wrap: balance;
    }

    /* Custom scrollbar */
    .scrollbar-thin::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .scrollbar-thin::-webkit-scrollbar-track {
        @apply bg-gray-100 rounded-full;
    }

    .scrollbar-thin::-webkit-scrollbar-thumb {
        @apply bg-gray-300 rounded-full hover:bg-gray-400;
    }

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

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

    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}