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

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 222.2 84% 4.9%;

        --card: 0 0% 100%;
        --card-foreground: 222.2 84% 4.9%;

        --popover: 0 0% 100%;
        --popover-foreground: 222.2 84% 4.9%;

        --primary: 222.2 47.4% 11.2%;
        --primary-foreground: 210 40% 98%;

        --secondary: 210 40% 96.1%;
        --secondary-foreground: 222.2 47.4% 11.2%;

        --muted: 210 40% 96.1%;
        --muted-foreground: 215.4 16.3% 46.9%;

        --accent: 210 40% 96.1%;
        --accent-foreground: 222.2 47.4% 11.2%;

        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 210 40% 98%;

        --border: 214.3 31.8% 91.4%;
        --input: 214.3 31.8% 91.4%;
        --ring: 222.2 84% 4.9%;

        --radius: 0.5rem;
    }

    .dark {
        --background: 222.2 84% 4.9%;
        --foreground: 210 40% 98%;

        --card: 222.2 84% 4.9%;
        --card-foreground: 210 40% 98%;

        --popover: 222.2 84% 4.9%;
        --popover-foreground: 210 40% 98%;

        --primary: 210 40% 98%;
        --primary-foreground: 222.2 47.4% 11.2%;

        --secondary: 217.2 32.6% 17.5%;
        --secondary-foreground: 210 40% 98%;

        --muted: 217.2 32.6% 17.5%;
        --muted-foreground: 215 20.2% 65.1%;

        --accent: 217.2 32.6% 17.5%;
        --accent-foreground: 210 40% 98%;

        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 40% 98%;

        --border: 217.2 32.6% 17.5%;
        --input: 217.2 32.6% 17.5%;
        --ring: 212.7 26.8% 83.9%;
    }
}

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

    body {
        @apply bg-background text-foreground;
    }
}

/* Animation keyframes */
@keyframes accordion-down {
    from {
        height: 0;
    }

    to {
        height: var(--radix-accordion-content-height, auto);
    }
}

@keyframes accordion-up {
    from {
        height: var(--radix-accordion-content-height, auto);
    }

    to {
        height: 0;
    }
}

/* Animation classes */
.animate-accordion-down {
    animation: accordion-down 0.2s ease-out;
}

.animate-accordion-up {
    animation: accordion-up 0.2s ease-out;
}

/* Custom styles for the application */
@layer components {

    /* Tab styles */
    .tab-button.active {
        @apply text-indigo-600 border-indigo-600;
    }

    /* Nutrition visualization styles */
    .nutrition-progress {
        @apply h-2.5 rounded-full transition-all duration-500;
    }

    /* Macro distribution chart animation */
    @keyframes fillup {
        from {
            stroke-dasharray: 0 251.2;
        }

        to {
            stroke-dasharray: attr(data-stroke) 251.2;
        }
    }

    circle[stroke-dasharray] {
        animation: fillup 1s ease-out forwards;
    }

    /* Headline gradient + shimmer per design system */
    @keyframes headline-shimmer {
        0% {
            background-position: 0% 50%;
        }

        100% {
            background-position: 200% 50%;
        }
    }

    .headline-gradient {
        background-image: linear-gradient(90deg, #14b8a6 0%, #5eead4 50%, #14b8a6 100%);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .animate-headline-shimmer {
        animation: headline-shimmer 2.2s linear infinite;
    }

    @media (prefers-reduced-motion: reduce) {
        .animate-headline-shimmer {
            animation: none;
        }
    }

    /* Reveal-on-scroll utilities (uses transitions so Tailwind delay-* works) */
    .reveal {
        opacity: 0;
        transform: translateY(16px);
        transition-property: opacity, transform;
        transition-duration: 500ms;
        transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Explicitly set styles for nutrition progress bars to ensure they're visible */
.w-full.bg-gray-200.h-2 {
    display: block;
    width: 100%;
    height: 8px;
    background-color: #e5e7eb;
}

.w-full.bg-gray-200.h-2>.bg-black.h-2 {
    display: block;
    height: 8px;
    background-color: #000000;
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */