@import url('../lib/css/css2_inter.css');
@import url('../lib/css/css2_sourcesanspro.css');
@import url('../lib/css/css2_nunitosans.css');
@import url('../lib/css/css2_ibmplexsans.css');

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

@layer base {
    :root {
        /* Primary Colors - Enterprise Authority */
        --color-primary: #1E3A8A; /* blue-900 */
        --color-primary-50: #EFF6FF; /* blue-50 */
        --color-primary-100: #DBEAFE; /* blue-100 */
        --color-primary-200: #BFDBFE; /* blue-200 */
        --color-primary-300: #93C5FD; /* blue-300 */
        --color-primary-400: #60A5FA; /* blue-400 */
        --color-primary-500: #3B82F6; /* blue-500 */
        --color-primary-600: #2563EB; /* blue-600 */
        --color-primary-700: #1D4ED8; /* blue-700 */
        --color-primary-800: #1E40AF; /* blue-800 */
        --color-primary-900: #1E3A8A; /* blue-900 */
        /* Secondary Colors - Supporting Hierarchy */
        --color-secondary: #3B82F6; /* blue-500 */
        --color-secondary-50: #EFF6FF; /* blue-50 */
        --color-secondary-100: #DBEAFE; /* blue-100 */
        --color-secondary-200: #BFDBFE; /* blue-200 */
        --color-secondary-300: #93C5FD; /* blue-300 */
        --color-secondary-400: #60A5FA; /* blue-400 */
        --color-secondary-500: #3B82F6; /* blue-500 */
        --color-secondary-600: #2563EB; /* blue-600 */
        --color-secondary-700: #1D4ED8; /* blue-700 */
        /* Accent Colors - Conversion Moments */
        --color-accent: #EA580C; /* orange-600 */
        --color-accent-50: #FFF7ED; /* orange-50 */
        --color-accent-100: #FFEDD5; /* orange-100 */
        --color-accent-200: #FED7AA; /* orange-200 */
        --color-accent-300: #FDBA74; /* orange-300 */
        --color-accent-400: #FB923C; /* orange-400 */
        --color-accent-500: #F97316; /* orange-500 */
        --color-accent-600: #EA580C; /* orange-600 */
        --color-accent-700: #C2410C; /* orange-700 */
        --color-accent-800: #9A3412; /* orange-800 */
        /* Background Colors */
        --color-background: #FAFBFC; /* slate-50 custom */
        --color-surface: #F1F5F9; /* slate-100 */
        --color-surface-hover: #E2E8F0; /* slate-200 */
        /* Text Colors */
        --color-text-primary: #0F172A; /* slate-900 */
        --color-text-secondary: #475569; /* slate-600 */
        --color-text-tertiary: #64748B; /* slate-500 */
        --color-text-inverse: #FFFFFF; /* white */
        /* Status Colors */
        --color-success: #059669; /* emerald-600 */
        --color-success-50: #ECFDF5; /* emerald-50 */
        --color-success-100: #D1FAE5; /* emerald-100 */
        --color-success-600: #059669; /* emerald-600 */
        --color-success-700: #047857; /* emerald-700 */

        --color-warning: #D97706; /* amber-600 */
        --color-warning-50: #FFFBEB; /* amber-50 */
        --color-warning-100: #FEF3C7; /* amber-100 */
        --color-warning-600: #D97706; /* amber-600 */
        --color-warning-700: #B45309; /* amber-700 */

        --color-error: #DC2626; /* red-600 */
        --color-error-50: #FEF2F2; /* red-50 */
        --color-error-100: #FEE2E2; /* red-100 */
        --color-error-600: #DC2626; /* red-600 */
        --color-error-700: #B91C1C; /* red-700 */
        /* Border Colors */
        --color-border: #E2E8F0; /* slate-200 */
        --color-border-light: #F1F5F9; /* slate-100 */
        --color-border-dark: #CBD5E1; /* slate-300 */
        /* Shadow Values */
        --shadow-cta: 0 4px 12px rgba(30, 58, 138, 0.15);
        --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
        --shadow-elevated: 0 8px 24px rgba(30, 58, 138, 0.12);
        --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.06);
    }

    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-text-primary font-body;
        font-feature-settings: "kern" 1, "liga" 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    h1, h2, h3, h4, h5, h6 {
        @apply font-headline text-text-primary;
        font-feature-settings: "kern" 1, "liga" 1;
    }
}

@layer components {
    /* CTA Button Styles */
    .btn-primary {
        @apply bg-accent text-text-inverse font-cta font-bold px-8 py-4 rounded-lg;
        @apply transition-all duration-250 ease-out;
        @apply hover:bg-accent-700 hover:shadow-cta;
        @apply focus:outline-none focus:ring-4 focus:ring-accent-200;
        @apply active:scale-95;
    }

    .btn-secondary {
        @apply bg-primary text-text-inverse font-cta font-bold px-8 py-4 rounded-lg;
        @apply transition-all duration-250 ease-out;
        @apply hover:bg-primary-800 hover:shadow-cta;
        @apply focus:outline-none focus:ring-4 focus:ring-primary-200;
        @apply active:scale-95;
    }

    .btn-outline {
        @apply border-2 border-primary text-primary font-cta font-bold px-8 py-4 rounded-lg;
        @apply transition-all duration-250 ease-out;
        @apply hover:bg-primary hover:text-text-inverse hover:shadow-cta;
        @apply focus:outline-none focus:ring-4 focus:ring-primary-200;
    }

    /* Card Styles */
    .card {
        @apply bg-white rounded-xl p-6;
        box-shadow: var(--shadow-card);
        @apply transition-shadow duration-250 ease-out;
    }

    .card-hover {
        @apply hover:shadow-elevated;
    }

    /* Form Input Styles */
    .input-field {
        @apply w-full px-4 py-3 border border-border rounded-lg;
        @apply text-text-primary font-body;
        @apply transition-all duration-250 ease-out;
        @apply focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary;
        @apply placeholder:text-text-tertiary;
    }

    .input-error {
        @apply border-error focus:ring-error focus:border-error;
    }

    /* Section Styles */
    .section-container {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24;
    }

    .section-surface {
        @apply bg-surface;
    }

    /* Badge Styles */
    .badge {
        @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-accent font-semibold;
    }

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

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

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

    /* Testimonial Card */
    .testimonial-card {
        @apply card card-hover;
        @apply opacity-0 translate-y-4;
        animation: fadeInUp 300ms ease-out forwards;
    }

    @keyframes fadeInUp {
        to {
            @apply opacity-100 translate-y-0;
        }
    }

    /* Trust Badge */
    .trust-badge {
        @apply inline-flex items-center gap-2 px-4 py-2 rounded-lg;
        @apply border border-border-dark bg-white;
        @apply font-accent font-semibold text-sm text-text-secondary;
    }

    /* Scarcity Indicator */
    .scarcity-indicator {
        @apply inline-flex items-center gap-2 px-4 py-2 rounded-lg;
        @apply bg-warning-50 border border-warning-600;
        @apply font-accent font-semibold text-warning-700;
    }
}

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

    .animation-delay-150 {
        animation-delay: 150ms;
    }

    .animation-delay-300 {
        animation-delay: 300ms;
    }

    .animation-delay-450 {
        animation-delay: 450ms;
    }

    .shadow-cta {
        box-shadow: var(--shadow-cta);
    }

    .shadow-card {
        box-shadow: var(--shadow-card);
    }

    .shadow-elevated {
        box-shadow: var(--shadow-elevated);
    }

    .shadow-subtle {
        box-shadow: var(--shadow-subtle);
    }
}