/**
 * * Tailwind theme settings
 *
 * These are in a separate file so it can be imported into <style> tags in .astro components
 */
 @theme {
    /* cosmic themes theme config */
    /* primary colors */
    --color-primary-50: #fdeff5;
    --color-primary-100: #fbdce9;
    --color-primary-200: #f7b8d3; /* end gradient color for h3 and p */
    --color-primary-300: #f28bb5;
    --color-primary-400: #eb8071; /* Main Text & rimary button Top Gradient, text primary li icons top */
    --color-primary-500: #c94484; /* Div border & Primary button Middle Gradient, text primary li icons top */
    --color-primary-600: #de536f; /*bottom button gradient, button outline, backgroun-glow  */
    --color-primary-700: #170C32; /* Currently Unused  */
    --color-primary-800: #1D2244; /* Autoshow Dark Blue */
    --color-primary-900: #dd546e; /* Autoshow Pink  */
    --color-primary-950: #92406e; /* Autoshow  Middle Purple */

    /* base colors */
    --color-base-50: #f6fde6;
    --color-base-100: #ffffff; /* Title for hero image */
    --color-base-200: #abb3df; /* Navigation Menu */
    --color-base-300: #818dcc; /* Paragraph 1  for hero image */
    --color-base-400: #cc0099; /* Lower gradient for title and "email" in sign up and footer font color */
    --color-base-500: #373b9d; /* inner border for selected sections */
    --color-base-600: #1d2145; /* border lines */
    --color-base-700: #1b1631; /* Very Dark Blue-Purple */
    --color-base-800: #92406e; /* BG color for conponents/containers (images, buttons, containers) */
    --color-base-900: #170C32; /*bg of thge website  Dark Purple*/
    --color-base-950: #eb8071; /*AutoShow Peach*/

    /* Breakpoints */
    --breakpoint-xs: 400px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* font families */
    --font-mono: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New",
        "monospace", "Lemon-Milk";
    --font-sans: "leelawadee", ui-sans-serif, system-ui, -apple, sans-serif;

    /* starwind and cosmic themes animations */
    --animate-accordion-down: accordion-down 0.2s ease-out;
    --animate-accordion-up: accordion-up 0.2s ease-out;
    --animate-marquee: marquee 40s linear infinite;
    --animate-marquee2: marquee2 50s linear infinite;
    --animate-backdrop-fade-in: backdropFadeIn ease-in-out 0.3s forwards;

    @keyframes accordion-down {
        from {
            height: 0;
        }
        to {
            height: var(--starwind-accordion-content-height);
        }
    }
    @keyframes accordion-up {
        from {
            height: var(--starwind-accordion-content-height);
        }
        to {
            height: 0;
        }
    }
    @keyframes marquee {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(calc(-100% - 1.5rem));
        }
    }
    @keyframes marquee2 {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(calc(-100% - 8rem));
        }
    }
    @keyframes backdropFadeIn {
        0% {
            visibility: hidden;
            opacity: theme(opacity.0);
        }
        100% {
            visibility: visible;
            opacity: theme(opacity.70);
        }
    }
    @keyframes codeContentFadeIn {
        0% {
            top: theme(spacing.1);
            opacity: theme(opacity.0);
        }
        100% {
            top: theme(spacing.0);
            opacity: theme(opacity.100);
        }
    }
}

/* "inline" option is necessary here https://github.com/tailwindlabs/tailwindcss/discussions/15122#discussioncomment-11356322 */
@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-info: var(--info);
    --color-info-foreground: var(--info-foreground);
    --color-success: var(--success);
    --color-success-foreground: var(--success-foreground);
    --color-warning: var(--warning);
    --color-warning-foreground: var(--warning-foreground);
    --color-error: var(--error);
    --color-error-foreground: var(--error-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-outline: var(--outline);

    --radius-xs: calc(var(--radius) - 0.375rem);
    --radius-sm: calc(var(--radius) - 0.25rem);
    --radius-md: calc(var(--radius) - 0.125rem);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 0.25rem);
    --radius-2xl: calc(var(--radius) + 0.5rem);
    --radius-3xl: calc(var(--radius) + 1rem);
}