@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700,800&f[]=satoshi@400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap');

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Geist', 'Satoshi', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #F8FAFC;
    color: #0F172A;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cabinet Grotesk', sans-serif;
    letter-spacing: -0.02em;
    color: #0A2540;
}

@layer base {
    :root {
        --background: 210 40% 98%;
        --foreground: 222 47% 11%;
        --card: 0 0% 100%;
        --card-foreground: 222 47% 11%;
        --popover: 0 0% 100%;
        --popover-foreground: 222 47% 11%;
        --primary: 215 78% 15%;
        --primary-foreground: 0 0% 100%;
        --secondary: 215 16% 27%;
        --secondary-foreground: 0 0% 100%;
        --muted: 215 25% 95%;
        --muted-foreground: 215 16% 35%;
        --accent: 215 95% 40%;
        --accent-foreground: 0 0% 100%;
        --destructive: 0 84% 60%;
        --destructive-foreground: 0 0% 100%;
        --border: 215 28% 91%;
        --input: 215 28% 91%;
        --ring: 215 78% 15%;
        --radius: 0.25rem;
    }
}

@layer base {
    * {
        @apply border-border;
    }
}

/* Custom utility classes */
.text-primary-navy { color: #0A2540; }
.bg-primary-navy { background-color: #0A2540; }
.border-primary-navy { border-color: #0A2540; }
.text-steel { color: #475569; }
.bg-steel { background-color: #334155; }
.bg-silver { background-color: #F1F5F9; }
.bg-surface { background-color: #FFFFFF; }
.bg-bg-base { background-color: #F8FAFC; }
.text-accent-blue { color: #0052CC; }
.bg-accent-blue { background-color: #0052CC; }

/* Marquee */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee {
    animation: marquee 30s linear infinite;
}

/* Fade-up entrance */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
    animation: fadeUp 0.8s ease-out forwards;
}

/* Subtle pulse */
@keyframes softPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(10, 37, 64, 0.4); }
    50% { box-shadow: 0 0 0 12px rgba(10, 37, 64, 0); }
}
.animate-soft-pulse {
    animation: softPulse 2.4s ease-in-out infinite;
}

/* Grid pattern background */
.bg-grid-pattern {
    background-image: linear-gradient(rgba(10, 37, 64, 0.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(10, 37, 64, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* Hide scrollbar for marquee containers */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }