@import 'tailwindcss';
@import 'primeicons/primeicons.css';

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

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

/*
 * CarryGo palette — https://coolors.co/10b981-c0e0de-162521-3c474b-9eefe5
 * #10b981 green · #c0e0de mint · #162521 ink · #3c474b slate · #9eefe5 aqua
 */
@theme inline {
    --font-sans:
        Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-headline:
        Manrope, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji';
    --font-body:
        Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji';
    --font-condensed: 'Barlow Condensed', sans-serif;

    --color-primary: #101828;
    --color-primary-container: #a7f3d0;
    --color-primary-fixed: #d1fae5;
    --color-primary-fixed-dim: #6ee7b7;
    --color-on-primary: #ffffff;
    --color-on-primary-container: #064e3b;
    --color-on-primary-fixed: #022c22;
    --color-on-primary-fixed-variant: #065f46;

    --color-secondary: #ffb000;
    --color-secondary-container: #d8ebe9;
    --color-secondary-fixed: #d8ebe9;
    --color-secondary-fixed-dim: #b8d5d0;
    --color-on-secondary: #ffffff;
    --color-on-secondary-container: #3c474b;
    --color-on-secondary-fixed: #162521;
    --color-on-secondary-fixed-variant: #3c474b;

    --color-tertiary: #3c474b;
    --color-tertiary-container: #9eefe5;
    --color-tertiary-fixed: #9eefe5;
    --color-tertiary-fixed-dim: #7ed9ce;
    --color-on-tertiary: #162521;
    --color-on-tertiary-container: #162521;
    --color-on-tertiary-fixed: #162521;
    --color-on-tertiary-fixed-variant: #3c474b;

    --color-background: #f5faf9;
    --color-surface: #f7f9fb;
    --color-surface-tint: #10b981;
    --color-surface-dim: #d8dadc;
    --color-surface-bright: #f7f9fb;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #eef6f4;
    --color-surface-container: #e4eeec;
    --color-surface-container-high: #dce8e6;
    --color-surface-container-highest: #d0d9d7;
    --color-surface-variant: #e0e3e5;

    --color-on-background: #162521;
    --color-on-surface: #162521;
    --color-on-surface-variant: #3c474b;

    --color-outline: #6c797c;
    --color-outline-variant: #c0e0de;

    --color-inverse-surface: #162521;
    --color-inverse-on-surface: #c0e0de;
    --color-inverse-primary: #9eefe5;

    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;

    --animate-bounce-slow: bounce-slow 3s ease-in-out infinite;
    --animate-marquee: marquee 28s linear infinite;
    --animate-float-img: floatImg 4s ease-in-out infinite;

    /* Navbar / Home brand colours */
    --color-navy: #101828;
    --color-lemon: #ffb000;
    --color-forest: #1d2939;
    --color-forest-dark: #0c111d;
    --color-forest-mid: #152031;
    --color-amber: #f59e0b;
    --color-muted-green: #344054;
    --color-ink: #05080f;
    --color-sage-tint: #f8fafc;
    --color-sage-border: #e2e8f0;
    --color-sage-light: #f1f5f9;
    --color-sage-mid: #e2e8f0;
    --color-sage-dark: #475467;
    --color-sage-bg: #f8fafc;
    --color-sage-border-dark: #cbd5e1;

    /* Shadcn radius tokens kept for auth/admin components */
    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    /* Shadcn semantic tokens kept for auth/admin components */
    --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-foreground: var(--primary-foreground);
    --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);
}

@keyframes bounce-slow {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes marquee {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes floatImg {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

@keyframes winners-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@layer components {
    .material-symbols-outlined {
        font-variation-settings:
            'FILL' 0,
            'wght' 300,
            'GRAD' 0,
            'opsz' 24;
        vertical-align: middle;
    }

    .material-symbols-outlined[data-weight='fill'] {
        font-variation-settings:
            'FILL' 1,
            'wght' 300,
            'GRAD' 0,
            'opsz' 24;
    }

    .glass-nav {
        background: rgba(255, 255, 255, 0.8);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .hero-pattern {
        background-color: var(--color-background);
        background-image:
            radial-gradient(
                var(--color-secondary-container) 1.5px,
                transparent 1.5px
            ),
            radial-gradient(
                var(--color-secondary-container) 1.5px,
                var(--color-background) 1.5px
            );
        background-size: 60px 60px;
        background-position:
            0 0,
            30px 30px;
    }

    .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .hero-banner-right-bg {
        background: radial-gradient(
            circle at 60% 50%,
            var(--color-forest-mid) 0%,
            var(--color-forest-dark) 70%
        );
    }
}

/* Shadcn CSS variable definitions — required by auth/admin/settings pages */
:root {
    --background: hsl(0 0% 100%);
    --foreground: hsl(0 0% 3.9%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(0 0% 3.9%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(0 0% 3.9%);
    --primary: hsl(0 0% 9%);
    --primary-foreground: hsl(0 0% 98%);
    --secondary: hsl(0 0% 92.1%);
    --secondary-foreground: hsl(0 0% 9%);
    --muted: hsl(0 0% 96.1%);
    --muted-foreground: hsl(0 0% 45.1%);
    --accent: hsl(0 0% 96.1%);
    --accent-foreground: hsl(0 0% 9%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(0 0% 92.8%);
    --input: hsl(0 0% 89.8%);
    --ring: hsl(0 0% 3.9%);
    --chart-1: hsl(12 76% 61%);
    --chart-2: hsl(173 58% 39%);
    --chart-3: hsl(197 37% 24%);
    --chart-4: hsl(43 74% 66%);
    --chart-5: hsl(27 87% 67%);
    --radius: 0.5rem;
    --sidebar-background: hsl(0 0% 98%);
    --sidebar-foreground: hsl(240 5.3% 26.1%);
    --sidebar-primary: hsl(0 0% 10%);
    --sidebar-primary-foreground: hsl(0 0% 98%);
    --sidebar-accent: hsl(0 0% 94%);
    --sidebar-accent-foreground: hsl(0 0% 30%);
    --sidebar-border: hsl(0 0% 91%);
    --sidebar-ring: hsl(217.2 91.2% 59.8%);
    --sidebar: hsl(0 0% 98%);
}

.dark {
    --background: hsl(0 0% 3.9%);
    --foreground: hsl(0 0% 98%);
    --card: hsl(0 0% 3.9%);
    --card-foreground: hsl(0 0% 98%);
    --popover: hsl(0 0% 3.9%);
    --popover-foreground: hsl(0 0% 98%);
    --primary: hsl(0 0% 98%);
    --primary-foreground: hsl(0 0% 9%);
    --secondary: hsl(0 0% 14.9%);
    --secondary-foreground: hsl(0 0% 98%);
    --muted: hsl(0 0% 16.08%);
    --muted-foreground: hsl(0 0% 63.9%);
    --accent: hsl(0 0% 14.9%);
    --accent-foreground: hsl(0 0% 98%);
    --destructive: hsl(0 84% 60%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(0 0% 14.9%);
    --input: hsl(0 0% 14.9%);
    --ring: hsl(0 0% 83.1%);
    --chart-1: hsl(220 70% 50%);
    --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(0 0% 7%);
    --sidebar-foreground: hsl(0 0% 95.9%);
    --sidebar-primary: hsl(360, 100%, 100%);
    --sidebar-primary-foreground: hsl(0 0% 100%);
    --sidebar-accent: hsl(0 0% 15.9%);
    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
    --sidebar-border: hsl(0 0% 15.9%);
    --sidebar-ring: hsl(217.2 91.2% 59.8%);
    --sidebar: hsl(240 5.9% 10%);
}

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

    * {
        @apply border-border outline-ring/50;
    }

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

/* CarryGo toast — vue-sonner */
.carrygo-toaster [data-sonner-toast] {
    @apply rounded-2xl border-2 border-lemon bg-navy px-5 py-4 font-body text-white shadow-[0_12px_40px_rgba(13,27,42,0.45)];
}

.carrygo-toaster [data-sonner-toast][data-type='success'] {
    @apply border-lemon;
}

.carrygo-toaster [data-sonner-toast][data-type='error'] {
    @apply bg-error text-white;
}

.carrygo-toaster [data-sonner-toast][data-type='warning'] {
    @apply bg-amber text-white;
}

.carrygo-toaster [data-sonner-toast][data-type='info'] {
    @apply bg-forest text-white;
}

.carrygo-toast__title {
    @apply text-sm font-extrabold tracking-wide text-lemon;
}

.carrygo-toaster [data-sonner-toast] [data-description] {
    @apply text-xs font-semibold text-white/85;
}

.carrygo-toast__icon {
    @apply text-lemon;
}

.carrygo-toaster [data-sonner-toast][data-type='error'] .carrygo-toast__icon {
    @apply text-error;
}

.carrygo-toaster [data-sonner-toast][data-type='warning'] .carrygo-toast__icon {
    @apply text-amber;
}

.carrygo-toast__close {
    @apply border border-white/20 bg-white/10 text-white transition-colors hover:bg-white/20;
}