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

:root {
    /* Theme: Startup / Modern (Green, Teal, Lime) */

    /* Background: White & Soft Grey */
    --background: 0 0% 100%;
    /* Foreground: Deep Charcoal / Black */
    --foreground: 220 15% 15%;

    /* Card styling: White */
    --card: 0 0% 100%;
    --card-foreground: 220 15% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 15% 15%;

    /* Primary: Modern Teal/Green */
    --primary: 170 85% 35%;
    --primary-foreground: 0 0% 100%;

    /* Secondary: Fresh Lime/Aqua (Vibrant accents) */
    --secondary: 150 80% 92%;
    --secondary-foreground: 165 90% 25%;

    /* Muted: Cool Neutral Gray */
    --muted: 220 10% 96%;
    --muted-foreground: 220 10% 45%;

    /* Accent: Electric Lime / Spring Green */
    --accent: 85 85% 55%;
    --accent-foreground: 220 15% 15%;

    /* Highlight: Bright Aqua */
    --highlight: 180 85% 45%;
    --highlight-foreground: 0 0% 100%;

    /* Trust: Clear Blue */
    --trust: 200 85% 50%;
    --trust-foreground: 0 0% 100%;

    /* Success: Vibrant Green */
    --success: 145 75% 40%;
    --success-foreground: 0 0% 100%;

    /* Destructive: Coral Red */
    --destructive: 0 80% 60%;
    --destructive-foreground: 0 0% 100%;

    /* Borders: Crisp Light Gray */
    --border: 220 15% 90%;
    --input: 220 15% 90%;

    /* Ring matches primary */
    --ring: 170 85% 35%;

    --radius: 0.5rem;
    /* Crisper, more modern radius */
}

.dark {
    /* Background: Deep Gunmetal / Black */
    --background: 220 20% 10%;
    --foreground: 0 0% 98%;

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

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

    /* Primary: Bright Teal for dark mode */
    --primary: 170 80% 50%;
    --primary-foreground: 0 0% 100%;

    /* Secondary: Darker Teal w/ brightness */
    --secondary: 170 50% 20%;
    --secondary-foreground: 170 80% 90%;

    --muted: 220 20% 18%;
    --muted-foreground: 220 10% 65%;

    /* Accent: Lime Green */
    --accent: 85 85% 55%;
    --accent-foreground: 220 20% 10%;

    --highlight: 180 80% 55%;
    --highlight-foreground: 0 0% 100%;

    --trust: 200 80% 60%;
    --trust-foreground: 0 0% 100%;

    --success: 145 70% 45%;
    --success-foreground: 0 0% 100%;

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

    --border: 220 20% 25%;
    --input: 220 20% 25%;
    --ring: 170 80% 50%;
}

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

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

::selection {
    background-color: hsl(var(--primary) / 0.2);
    color: hsl(var(--foreground));
}

/* Gradient utilities (Startup Style) */
.gradient-primary {
    background: linear-gradient(135deg, hsl(170 90% 35%) 0%, hsl(190 85% 45%) 100%);
    /* Teal to Blue */
}

.gradient-hero {
    background: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(170 40% 96%) 100%);
    /* Fade to faint teal */
}

.gradient-card {
    background: linear-gradient(135deg, hsl(var(--card)) 0%, hsl(220 20% 98%) 100%);
    /* Clean white/gray gradient */
}

/* Shadow utilities (Crisp & Modern) */
.shadow-soft {
    box-shadow: 0 4px 15px -3px hsl(220 20% 10% / 0.08);
    /* Crisp shadow */
}

.shadow-card {
    box-shadow: 0 2px 8px -2px hsl(220 20% 10% / 0.05),
        0 4px 16px -4px hsl(220 20% 10% / 0.08);
}

.shadow-card-hover {
    box-shadow: 0 10px 30px -4px hsl(220 20% 10% / 0.1),
        0 4px 10px -2px hsl(170 80% 40% / 0.05);
    /* Colored shadow hint */
}

/* Animation utilities */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-bounce-gentle {
    animation: bounce-gentle 2s ease-in-out infinite;
}

@keyframes bounce-gentle {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* Transition utilities */
.transition-card {
    transition: all 0.2s ease-out;
    /* Snappier transitions for startup feel */
}

.hover-lift {
    transition: all 0.2s ease-out;
}

.hover-lift:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 10px 30px -4px hsl(220 20% 10% / 0.1),
        0 4px 10px -2px hsl(170 80% 40% / 0.1);
}

/* Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.4s ease-out forwards;
    /* Snappier */
    opacity: 0;
    animation-fill-mode: forwards;
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}