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

@layer base {
    :root {
        --color-primary: #0f172a;
        --color-primary-light: #1e293b;
        --color-accent: #06b6d4;
        --color-accent-light: #22d3ee;
        --color-highlight: #f59e0b;
        --color-surface: #f8fafc;
        --color-border: #e2e8f0;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        @apply bg-slate-50 text-slate-800 antialiased;
    }
}

@layer components {
    .btn-primary {
        @apply px-6 py-3 bg-cyan-500 text-white font-medium rounded-lg hover:bg-cyan-600 transition-all duration-200 shadow-lg shadow-cyan-500/25;
    }

    .btn-secondary {
        @apply px-6 py-3 bg-slate-800 text-white font-medium rounded-lg hover:bg-slate-700 transition-all duration-200;
    }

    .btn-outline {
        @apply px-6 py-3 border-2 border-cyan-500 text-cyan-500 font-medium rounded-lg hover:bg-cyan-50 transition-all duration-200;
    }

    .card {
        @apply bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden hover:shadow-md transition-shadow duration-300;
    }

    .card-hover {
        @apply hover:border-cyan-300 hover:-translate-y-1;
    }

    .section-title {
        @apply text-2xl font-bold text-slate-900 mb-2;
    }

    .section-subtitle {
        @apply text-slate-500 mb-8;
    }

    .stat-value {
        @apply text-3xl font-bold text-slate-900;
    }

    .stat-label {
        @apply text-sm text-slate-500 mb-1;
    }

    .nav-link {
        @apply px-4 py-2 text-slate-600 hover:text-cyan-600 font-medium transition-colors;
    }

    .nav-link-active {
        @apply text-cyan-600 border-b-2 border-cyan-500;
    }

    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }

    .badge-cyan {
        @apply bg-cyan-100 text-cyan-800;
    }

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

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

    .input-field {
        @apply w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 outline-none transition-all;
    }

    .table-header {
        @apply px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider bg-slate-50;
    }

    .table-cell {
        @apply px-6 py-4 text-sm text-slate-700;
    }
}

@layer utilities {
    .text-gradient {
        @apply bg-clip-text text-transparent bg-gradient-to-r from-cyan-500 to-blue-600;
    }

    .bg-grid-pattern {
        background-image:
            linear-gradient(to right, rgba(148, 163, 184, 0.05) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
        background-size: 40px 40px;
    }

    .bg-hero-gradient {
        background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
    }

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

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