@import 'tailwindcss';

@import 'tw-animate-css';

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

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

/*
 * Ser Ajayu - Design System
 * Paleta inspirada en la naturaleza andina y amazónica
 *
 * Primary Colors:
 * - Deep Forest Green: #1a4d2e (botones, nav activa)
 * - Vibrant Emerald: #2d6a4f (hover, enlaces)
 * - Golden Ochre: #c9a227 (acentos, badges)
 * - Warm Terracotta: #b85c38 (secundario, CTAs)
 *
 * Supporting Colors:
 * - Rich Brown: #5c4033 (textos earth)
 * - Sage Green: #95b8a6 (fondos suaves)
 * - Cream White: #faf6f1 (background light)
 * - Dark Earth: #1a1612 (background dark)
 */

@theme {
    --font-sans:
        'Inter', '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);
    --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);

    /* Custom Ser Ajayu Colors */
    --color-forest: var(--forest);
    --color-forest-light: var(--forest-light);
    --color-ochre: var(--ochre);
    --color-terracotta: var(--terracotta);
    --color-earth: var(--earth);
    --color-sage: var(--sage);
}

:root {
    /* Ser Ajayu Custom Colors */
    --forest: oklch(0.35 0.08 155);          /* #1a4d2e - Deep Forest Green */
    --forest-light: oklch(0.45 0.1 155);     /* #2d6a4f - Vibrant Emerald */
    --ochre: oklch(0.72 0.14 85);            /* #c9a227 - Golden Ochre */
    --terracotta: oklch(0.55 0.14 35);       /* #b85c38 - Warm Terracotta */
    --earth: oklch(0.38 0.05 50);            /* #5c4033 - Rich Brown */
    --sage: oklch(0.75 0.05 160);            /* #95b8a6 - Sage Green */

    /* Theme Colors - Light Mode */
    --background: oklch(0.98 0.005 80);      /* #faf6f1 - Cream White */
    --foreground: oklch(0.25 0.02 50);       /* Dark brown text */
    
    --card: oklch(1 0 0);                    /* White cards */
    --card-foreground: oklch(0.25 0.02 50);
    
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.25 0.02 50);
    
    --primary: oklch(0.35 0.08 155);         /* Deep Forest Green */
    --primary-foreground: oklch(0.98 0.005 80);
    
    --secondary: oklch(0.55 0.14 35);        /* Terracotta */
    --secondary-foreground: oklch(0.98 0.005 80);
    
    --muted: oklch(0.94 0.01 80);            /* Light cream */
    --muted-foreground: oklch(0.45 0.03 50);
    
    --accent: oklch(0.72 0.14 85);           /* Golden Ochre */
    --accent-foreground: oklch(0.2 0.02 50);
    
    --destructive: oklch(0.55 0.2 25);       /* Red for errors */
    --destructive-foreground: oklch(0.98 0 0);
    
    --border: oklch(0.88 0.01 80);
    --input: oklch(0.88 0.01 80);
    --ring: oklch(0.45 0.1 155);             /* Emerald ring */
    
    /* Chart colors using our palette */
    --chart-1: oklch(0.35 0.08 155);         /* Forest */
    --chart-2: oklch(0.72 0.14 85);          /* Ochre */
    --chart-3: oklch(0.55 0.14 35);          /* Terracotta */
    --chart-4: oklch(0.75 0.05 160);         /* Sage */
    --chart-5: oklch(0.38 0.05 50);          /* Earth */
    
    --radius: 0.625rem;
    
    /* Sidebar - Light */
    --sidebar: oklch(0.96 0.008 80);         /* Slightly darker cream */
    --sidebar-foreground: oklch(0.25 0.02 50);
    --sidebar-primary: oklch(0.35 0.08 155);
    --sidebar-primary-foreground: oklch(0.98 0.005 80);
    --sidebar-accent: oklch(0.92 0.02 155);  /* Very light green */
    --sidebar-accent-foreground: oklch(0.3 0.06 155);
    --sidebar-border: oklch(0.88 0.01 80);
    --sidebar-ring: oklch(0.45 0.1 155);
}

.dark {
    /* Ser Ajayu Custom Colors - Dark Mode */
    --forest: oklch(0.5 0.1 155);            /* Lighter forest for dark mode */
    --forest-light: oklch(0.55 0.12 155);
    --ochre: oklch(0.72 0.14 85);
    --terracotta: oklch(0.6 0.14 35);
    --earth: oklch(0.5 0.05 50);
    --sage: oklch(0.6 0.05 160);

    /* Theme Colors - Dark Mode */
    --background: oklch(0.15 0.01 50);       /* #1a1612 - Dark Earth */
    --foreground: oklch(0.92 0.01 80);       /* Light cream text */
    
    --card: oklch(0.2 0.01 50);              /* Slightly lighter than bg */
    --card-foreground: oklch(0.92 0.01 80);
    
    --popover: oklch(0.2 0.01 50);
    --popover-foreground: oklch(0.92 0.01 80);
    
    --primary: oklch(0.5 0.1 155);           /* Lighter forest for contrast */
    --primary-foreground: oklch(0.98 0 0);
    
    --secondary: oklch(0.6 0.14 35);         /* Lighter terracotta */
    --secondary-foreground: oklch(0.98 0 0);
    
    --muted: oklch(0.25 0.01 50);
    --muted-foreground: oklch(0.65 0.02 80);
    
    --accent: oklch(0.72 0.14 85);           /* Golden Ochre stays vibrant */
    --accent-foreground: oklch(0.15 0.01 50);
    
    --destructive: oklch(0.45 0.18 25);
    --destructive-foreground: oklch(0.7 0.2 25);
    
    --border: oklch(0.3 0.01 50);
    --input: oklch(0.3 0.01 50);
    --ring: oklch(0.5 0.1 155);
    
    /* Chart colors - Dark Mode */
    --chart-1: oklch(0.5 0.1 155);
    --chart-2: oklch(0.72 0.14 85);
    --chart-3: oklch(0.6 0.14 35);
    --chart-4: oklch(0.6 0.05 160);
    --chart-5: oklch(0.5 0.05 50);
    
    /* Sidebar - Dark */
    --sidebar: oklch(0.18 0.01 50);
    --sidebar-foreground: oklch(0.92 0.01 80);
    --sidebar-primary: oklch(0.5 0.1 155);
    --sidebar-primary-foreground: oklch(0.98 0 0);
    --sidebar-accent: oklch(0.25 0.02 155);
    --sidebar-accent-foreground: oklch(0.7 0.08 155);
    --sidebar-border: oklch(0.3 0.01 50);
    --sidebar-ring: oklch(0.5 0.1 155);
}

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

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

    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }

    /* Custom scrollbar for Ser Ajayu */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        @apply bg-muted;
    }

    ::-webkit-scrollbar-thumb {
        @apply bg-forest/40 rounded-full;
    }

    ::-webkit-scrollbar-thumb:hover {
        @apply bg-forest/60;
    }
}

@layer components {
    /* Ser Ajayu Button Variants */
    .btn-forest {
        @apply bg-forest text-white hover:bg-forest-light transition-colors;
    }

    .btn-ochre {
        @apply bg-ochre text-earth hover:opacity-90 transition-opacity;
    }

    .btn-terracotta {
        @apply bg-terracotta text-white hover:opacity-90 transition-opacity;
    }

    /* Gradient backgrounds */
    .bg-gradient-forest {
        background: linear-gradient(135deg, oklch(0.35 0.08 155) 0%, oklch(0.45 0.1 155) 100%);
    }

    .bg-gradient-earth {
        background: linear-gradient(135deg, oklch(0.38 0.05 50) 0%, oklch(0.55 0.14 35) 100%);
    }

    /* Card with subtle shadow */
    .card-elevated {
        @apply bg-card rounded-lg shadow-lg shadow-earth/5 border border-border;
    }

    /* Bottom navigation for mobile */
    .bottom-nav {
        @apply fixed bottom-0 left-0 right-0 bg-card border-t border-border;
        @apply flex justify-around items-center h-16 z-50;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .bottom-nav-item {
        @apply flex flex-col items-center justify-center gap-1 px-3 py-2;
        @apply text-muted-foreground hover:text-primary transition-colors;
    }

    .bottom-nav-item.active {
        @apply text-primary;
    }
}

@layer utilities {
    /* Safe area for mobile */
    .safe-area-pb {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .safe-area-pt {
        padding-top: env(safe-area-inset-top, 0px);
    }

    /* Hide scrollbar but keep functionality */
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

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

    /* Glassmorphism utilities */
    .glass {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .dark .glass {
        background: rgba(26, 22, 18, 0.7);
    }

    /* Smooth transitions for all interactive elements */
    .transition-smooth {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
}