/* Google Fonts - Must be first */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Custom Variables - Must be before Tailwind directives */
:root {
    /* Primary Colors */
    --primary-900: #06283D; /* Darkest blue */
    --primary-800: #073B5E; /* Very dark blue */
    --primary-700: #084F7F; /* Dark blue */
    --primary-600: #0A64A0; /* Medium-dark blue */
    --primary-500: #1B98E0; /* Bright blue - primary brand color */
    --primary-400: #47B5FF; /* Medium blue - secondary brand color */
    --primary-300: #6FC2FF; /* Light medium blue */
    --primary-200: #9BD6FF; /* Light blue */
    --primary-100: #D6EEFF; /* Very light blue */
    --primary-50: #F0F8FF; /* Lightest blue */
    
    /* UI Colors */
    --dark: var(--primary-900); /* Dark background */
    --light: #f8fafc; /* Light background */
    --accent: #0DA2FF; /* Accent color (more blue-aligned) */
    
    /* Shortcuts for common use */
    --primary: var(--primary-900);
    --secondary: var(--primary-500);
    --tertiary: var(--primary-400);
}

/* Shared styles for CheckSec website */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Component Classes */
@layer components {
    /* Buttons */
    .btn {
        @apply font-medium py-3 px-6 rounded-lg transition duration-300 inline-flex items-center justify-center;
    }
    
    .btn-primary {
        @apply btn bg-secondary hover:bg-tertiary text-white;
    }
    
    .btn-secondary {
        @apply btn bg-white hover:bg-gray-50 text-primary border border-gray-200;
    }
    
    .btn-outline {
        @apply btn bg-transparent hover:bg-white/10 border border-white text-white;
    }
    
    .btn-gradient {
        @apply btn gradient-bg text-white hover:shadow-lg;
    }
    
    /* Cards */
    .card {
        @apply bg-white rounded-xl shadow-lg overflow-hidden;
    }
    
    .card-hover {
        @apply card hover:shadow-xl transition duration-300;
    }
    
    .card-lift {
        @apply card hover:shadow-2xl hover:-translate-y-1 transition duration-300;
    }
    
    /* Feature Cards */
    .feature-card {
        @apply card-hover p-8;
    }
    
    .feature-icon {
        @apply w-14 h-14 rounded-lg flex items-center justify-center mb-6;
    }
    
    /* Navigation */
    .nav-link {
        @apply text-white/80 hover:text-white transition font-medium;
    }
    
    .nav-link-active {
        @apply text-white hover:text-tertiary transition font-medium;
    }
    
    /* Sections */
    .section {
        @apply py-20;
    }
    
    .section-header {
        @apply text-center mb-16;
    }
    
    .section-badge {
        @apply inline-block px-3 py-1 text-sm font-medium rounded-full mb-4;
    }
    
    .section-badge-primary {
        @apply section-badge bg-secondary/20 text-secondary;
    }
    
    .section-badge-white {
        @apply section-badge bg-white/20 text-white backdrop-blur-sm;
    }
    
    .section-title {
        @apply text-4xl lg:text-5xl font-bold mb-6;
    }
    
    .section-subtitle {
        @apply text-xl text-gray-600 max-w-3xl mx-auto;
    }
    
    /* Hero Section */
    .hero-bg {
        @apply relative pt-20 pb-20 lg:pt-24 lg:pb-32 overflow-hidden bg-primary;
    }
    
    .hero-pattern {
        @apply absolute inset-0 opacity-10;
    }
    
    .hero-divider {
        @apply absolute bottom-0 left-0 right-0;
    }
    
    /* Stats/Metrics */
    .stat-card {
        @apply bg-white/10 backdrop-blur-sm rounded-lg p-4 text-center;
    }
    
    .stat-number {
        @apply text-3xl font-bold text-white;
    }
    
    .stat-label {
        @apply text-white/70 text-sm;
    }
    
    /* Testimonials */
    .testimonial-card {
        @apply bg-white/10 backdrop-blur-sm rounded-xl p-8 hover:bg-white/20 transition duration-300;
    }
    
    .testimonial-quote {
        @apply text-white/90 mb-6;
    }
    
    .testimonial-author {
        @apply font-bold text-white;
    }
    
    .testimonial-role {
        @apply text-white/70 text-sm;
    }
    
    /* Steps/Process */
    .step-visual {
        @apply relative rounded-xl p-6 mb-6 h-64 overflow-hidden;
    }
    
    .step-number {
        @apply lg:hidden w-12 h-12 bg-secondary rounded-full flex items-center justify-center text-white font-bold shadow-lg mx-auto mb-4;
    }
    
    .step-title {
        @apply text-2xl font-bold text-primary mb-3;
    }
    
    .step-description {
        @apply text-gray-600 mb-4;
    }
    
    .check-item {
        @apply flex items-start;
    }
    
    .check-icon {
        @apply w-5 h-5 text-secondary mr-2 flex-shrink-0 mt-0.5;
    }
}

/* Utility Classes */
@layer utilities {
    .gradient-bg {
        background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 100%);
    }
    
    .gradient-text {
        background: linear-gradient(90deg, var(--primary-500) 0%, var(--primary-400) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .hover-lift {
        transition: transform 0.3s ease;
    }
    
    .hover-lift:hover {
        transform: translateY(-4px);
    }
}

/* Logo styles */
.logo {
    display: inline-block;
    height: 40px;
    width: auto;
}