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

:root {
    --background: 0 0% 98%;
    --foreground: 220 20% 14%;

    --card: 0 0% 100%;
    --card-foreground: 220 20% 14%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 20% 14%;

    --primary: 2 86% 49%;
    --primary-foreground: 0 0% 100%;

    --secondary: 220 14% 96%;
    --secondary-foreground: 220 20% 14%;

    --muted: 220 14% 96%;
    --muted-foreground: 220 9% 46%;

    --accent: 40 96% 53%;
    --accent-foreground: 220 20% 14%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 2 86% 49%;

    --radius: 0.75rem;

    --font-heading: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;

    --shadow-card: 0 1px 3px 0 hsl(0 0% 0% / 0.06), 0 1px 2px -1px hsl(0 0% 0% / 0.06);
    --shadow-elevated: 0 10px 25px -5px hsl(0 0% 0% / 0.08), 0 8px 10px -6px hsl(0 0% 0% / 0.04);
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

/* Marquee Animation */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    animation: marquee 60s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

.w-max {
    width: max-content;
}

/* Custom styles for matching Shadcn/Tailwind look if needed */
.container {
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1200px;
    }

.bg-muted-dark {
    background-color: #f4f4f5 !important;
}