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

/* Root */
:root {
    --background: 30 20% 98%;
    --foreground: 220 20% 10%;

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

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

    --primary: 24 95% 53%;
    --primary-foreground: 0 0% 100%;

    --secondary: 30 30% 96%;
    --secondary-foreground: 220 20% 10%;

    --muted: 30 20% 94%;
    --muted-foreground: 220 10% 40%;

    --accent: 24 100% 96%;
    --accent-foreground: 24 95% 40%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 30 20% 90%;
    --input: 30 20% 90%;
    --ring: 24 95% 53%;

    --radius: 0.75rem;

    /* Custom colors */
    --coral: 24 95% 53%;
    --coral-light: 24 100% 96%;
    --coral-dark: 24 90% 45%;
    --dark: 0 0 0;
    --navy: 220 60% 15%;
    --navy-light: 220 40% 25%;
    --slate: 220 15% 50%;
    --success: 142 70% 45%;
    --warning: 45 100% 50%;
    --white: 0 0 100%;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(24 95% 53%) 0%, hsl(35 100% 55%) 100%);
    --gradient-dark: linear-gradient(180deg, hsl(220 60% 12%) 0%, hsl(220 50% 8%) 100%);
    --gradient-glow: radial-gradient(circle at center, hsl(24 100% 60% / 0.3) 0%, transparent 70%);

    /* Shadows */
    --shadow-sm: 0 2px 8px hsl(220 20% 10% / 0.06);
    --shadow-md: 0 4px 20px hsl(220 20% 10% / 0.1);
    --shadow-lg: 0 10px 40px hsl(220 20% 10% / 0.15);
    --shadow-glow: 0 0 60px hsl(24 95% 53% / 0.3);
    --shadow-card: 0 4px 24px hsl(220 20% 10% / 0.08);

    --primary-light: rgba(255, 128, 64, 0.1);
}

* {
    border-color: hsl(var(--border));
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: "Plus Jakarta Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
}

.bg-fl-primary {
    background-color: hsl(var(--primary)) !important;
}

.text-fl-primary {
    color: hsl(var(--primary)) !important;
}

.gradient-text {
    color: transparent;
    background-image: var(--gradient-primary);
    -webkit-background-clip: text;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-pulse::after {
  content: "|";
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}