@import 'tailwindcss';

@import 'tw-animate-css';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

@custom-variant dark (&:is(.dark *));

@theme inline {
    --font-sans:
        Instrument Sans, ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';

    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    --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-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);

    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);

    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);

    --color-sidebar: var(--sidebar-background);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

@layer utilities {
    body,
    html {
        --font-sans:
            'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
            'Noto Color Emoji';
    }

    .bg-gradient-instagram {
        background: linear-gradient(
            45deg,
            #f09433 0%,
            #e6683c 25%,
            #dc2743 50%,
            #cc2366 75%,
            #bc1888 100%
        );
    }

    .bg-gradient-meta {
        background: linear-gradient(135deg, #0081fb 0%, #0064e0 100%);
    }

    .bg-gradient-ai {
        background: linear-gradient(
            135deg,
            #6366f1 0%,
            #8b5cf6 50%,
            #ec4899 100%
        );
    }
}

:root {
    --background: hsl(220 20% 98%);
    --foreground: hsl(224 71% 4%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(224 71% 4%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(224 71% 4%);
    --primary: hsl(238 84% 59%);
    --primary-foreground: hsl(0 0% 100%);
    --secondary: hsl(220 14% 96%);
    --secondary-foreground: hsl(224 71% 4%);
    --muted: hsl(220 14% 94%);
    --muted-foreground: hsl(220 9% 46%);
    --accent: hsl(238 84% 96%);
    --accent-foreground: hsl(238 84% 45%);
    --destructive: hsl(0 84% 60%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(220 13% 90%);
    --input: hsl(220 13% 88%);
    --ring: hsl(238 84% 59%);
    --chart-1: hsl(238 84% 59%);
    --chart-2: hsl(160 60% 45%);
    --chart-3: hsl(30 80% 55%);
    --chart-4: hsl(280 65% 60%);
    --chart-5: hsl(340 75% 55%);
    --radius: 0.625rem;
    --sidebar-background: hsl(220 20% 97%);
    --sidebar-foreground: hsl(224 71% 18%);
    --sidebar-primary: hsl(238 84% 59%);
    --sidebar-primary-foreground: hsl(0 0% 100%);
    --sidebar-accent: hsl(220 14% 92%);
    --sidebar-accent-foreground: hsl(224 71% 4%);
    --sidebar-border: hsl(220 13% 88%);
    --sidebar-ring: hsl(238 84% 59%);
    --sidebar: hsl(220 20% 97%);
}

.dark {
    --background: hsl(224 71% 4%);
    --foreground: hsl(210 20% 98%);
    --card: hsl(224 71% 6.5%);
    --card-foreground: hsl(210 20% 98%);
    --popover: hsl(224 71% 7%);
    --popover-foreground: hsl(210 20% 98%);
    --primary: hsl(238 84% 67%);
    --primary-foreground: hsl(224 71% 4%);
    --secondary: hsl(217 33% 13%);
    --secondary-foreground: hsl(210 20% 98%);
    --muted: hsl(217 33% 12%);
    --muted-foreground: hsl(215 20% 65%);
    --accent: hsl(238 84% 20%);
    --accent-foreground: hsl(238 84% 80%);
    --destructive: hsl(0 72% 51%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(217 33% 15%);
    --input: hsl(217 33% 17%);
    --ring: hsl(238 84% 67%);
    --chart-1: hsl(238 84% 67%);
    --chart-2: hsl(160 60% 45%);
    --chart-3: hsl(30 80% 55%);
    --chart-4: hsl(280 65% 60%);
    --chart-5: hsl(340 75% 55%);
    --sidebar-background: hsl(224 71% 5%);
    --sidebar-foreground: hsl(210 20% 90%);
    --sidebar-primary: hsl(238 84% 67%);
    --sidebar-primary-foreground: hsl(224 71% 4%);
    --sidebar-accent: hsl(217 33% 12%);
    --sidebar-accent-foreground: hsl(210 20% 98%);
    --sidebar-border: hsl(217 33% 14%);
    --sidebar-ring: hsl(238 84% 67%);
    --sidebar: hsl(224 71% 5%);
}

@layer base {
    * {
        @apply border-border outline-ring/50;
    }
    body {
        @apply bg-background text-foreground;
    }
}