@import 'tailwindcss';

@plugin 'tailwindcss-animate';
@plugin '@tailwindcss/typography';

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

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

@theme {
    --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-beige-50: oklch(0.98 0.01 45);
    --color-beige-100: oklch(0.95 0.02 50);
    --color-beige-200: oklch(0.88 0.04 55);
    --color-beige-400: oklch(0.70 0.08 60);
    --color-beige-600: oklch(0.45 0.12 65);

    --color-pistachio-50: oklch(0.96 0.02 120);
    --color-pistachio-100: oklch(0.92 0.04 125);
    --color-pistachio-200: oklch(0.85 0.06 130);
    --color-pistachio-300: oklch(0.75 0.08 135);
    --color-pistachio-400: oklch(0.65 0.12 140);
    --color-pistachio-500: oklch(0.55 0.15 145);
    --color-pistachio-600: oklch(0.45 0.18 150);
    --color-pistachio-700: oklch(0.35 0.20 155);

    --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);
    --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);
}

:root {
    --background: oklch(0.97 0.02 45);
    --foreground: oklch(0.15 0.05 45);
    --card: oklch(0.98 0.01 45);
    --card-foreground: oklch(0.15 0.05 45);
    --popover: oklch(0.98 0.01 45);
    --popover-foreground: oklch(0.15 0.05 45);
    --primary: oklch(0.45 0.15 120);
    --primary-foreground: oklch(0.97 0.02 45);
    --secondary: oklch(0.92 0.03 80);
    --secondary-foreground: oklch(0.25 0.08 80);
    --muted: oklch(0.94 0.02 60);
    --muted-foreground: oklch(0.45 0.08 60);
    --accent: oklch(0.88 0.08 140);
    --accent-foreground: oklch(0.15 0.05 140);
    --destructive: oklch(0.55 0.22 15);
    --destructive-foreground: oklch(0.97 0.02 15);
    --border: oklch(0.88 0.04 70);
    --input: oklch(0.92 0.02 70);
    --ring: oklch(0.50 0.18 120);
    --chart-1: oklch(0.50 0.18 120);
    --chart-2: oklch(0.55 0.15 140);
    --chart-3: oklch(0.60 0.12 160);
    --chart-4: oklch(0.65 0.10 180);
    --chart-5: oklch(0.58 0.14 100);
    --radius: 0.75rem;
    --sidebar: oklch(0.96 0.02 50);
    --sidebar-foreground: oklch(0.18 0.06 50);
    --sidebar-primary: oklch(0.50 0.16 120);
    --sidebar-primary-foreground: oklch(0.97 0.02 120);
    --sidebar-accent: oklch(0.90 0.04 90);
    --sidebar-accent-foreground: oklch(0.20 0.07 90);
    --sidebar-border: oklch(0.85 0.03 70);
    --sidebar-ring: oklch(0.55 0.15 120);
}

.dark {
    --background: oklch(0.12 0.05 280);
    --foreground: oklch(0.95 0.03 280);
    --card: oklch(0.15 0.06 280);
    --card-foreground: oklch(0.95 0.03 280);
    --popover: oklch(0.15 0.06 280);
    --popover-foreground: oklch(0.95 0.03 280);
    --primary: oklch(0.65 0.28 300);
    --primary-foreground: oklch(0.12 0.05 300);
    --secondary: oklch(0.25 0.12 200);
    --secondary-foreground: oklch(0.90 0.04 200);
    --muted: oklch(0.22 0.08 220);
    --muted-foreground: oklch(0.65 0.15 220);
    --accent: oklch(0.30 0.15 160);
    --accent-foreground: oklch(0.95 0.03 160);
    --destructive: oklch(0.55 0.25 15);
    --destructive-foreground: oklch(0.95 0.03 15);
    --border: oklch(0.25 0.08 240);
    --input: oklch(0.20 0.06 240);
    --ring: oklch(0.70 0.22 300);
    --chart-1: oklch(0.65 0.28 320);
    --chart-2: oklch(0.60 0.25 200);
    --chart-3: oklch(0.55 0.22 120);
    --chart-4: oklch(0.70 0.20 40);
    --chart-5: oklch(0.62 0.26 280);
    --sidebar: oklch(0.18 0.07 260);
    --sidebar-foreground: oklch(0.92 0.04 260);
    --sidebar-primary: oklch(0.65 0.25 300);
    --sidebar-primary-foreground: oklch(0.18 0.07 300);
    --sidebar-accent: oklch(0.28 0.12 180);
    --sidebar-accent-foreground: oklch(0.92 0.04 180);
    --sidebar-border: oklch(0.22 0.08 240);
    --sidebar-ring: oklch(0.75 0.20 300);
}

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

    body {
        @apply bg-background text-foreground;
        background-image:
            radial-gradient(circle at 20% 80%, rgba(139, 166, 117, 0.08) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(222, 184, 135, 0.06) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(152, 251, 152, 0.05) 0%, transparent 50%);
        background-attachment: fixed;
        min-height: 100vh;
    }

    /* Global hover effects for interactive elements */
    button, a, input, textarea, select {
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Subtle animations for cards and interactive elements */
    .card-hover {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .card-hover:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    /* Gradient text effect with pistachio and beige */
    .gradient-text {
        background: linear-gradient(135deg, #8ba675 0%, #deb887 50%, #98fb98 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Modern gradient borders with subtle animation */
    .gradient-border {
        position: relative;
        background: linear-gradient(135deg, #8ba675, #deb887, #98fb98);
        background-size: 300% 300%;
        animation: gradientShift 8s ease infinite;
        padding: 1px;
        border-radius: 12px;
    }

    .gradient-border::before {
        content: '';
        position: absolute;
        top: 1px;
        left: 1px;
        right: 1px;
        bottom: 1px;
        background: var(--background);
        border-radius: 11px;
        z-index: 1;
    }

    .gradient-border > * {
        position: relative;
        z-index: 2;
    }

    @keyframes gradientShift {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }

    /* Floating animation for decorative elements */
    .float {
        animation: float 6s ease-in-out infinite;
    }

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

    /* Pulse effect for important buttons */
    .pulse-glow {
        animation: pulseGlow 2s ease-in-out infinite alternate;
    }

    @keyframes pulseGlow {
        from {
            box-shadow: 0 0 20px rgba(102, 126, 234, 0.4);
        }
        to {
            box-shadow: 0 0 30px rgba(102, 126, 234, 0.8);
        }
    }
}