@import 'tailwindcss';

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

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

    /* Custom Colors for Flowieons */
    --color-bg-dark: #1A1A1A;
    --color-bg-sidebar: #111111;
    --color-bg-card: #242424;
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #A0A0A0;
    --color-border-dim: rgba(255, 255, 255, 0.05);
    --color-accent-green: #B5FF6B;
    --color-accent-cream: #E5CFA5;
}

@layer base {
    :root {
        --bg-dark: #1A1A1A;
        --bg-sidebar: #111111;
        --bg-card: #242424;
        --text-primary: #FFFFFF;
        --text-secondary: #A0A0A0;
        --border-color: rgba(255, 255, 255, 0.05);
        --input-bg: rgba(255, 255, 255, 0.05);
        --accent-green: #B5FF6B;
        --radius-lg: 24px;
        --radius-md: 16px;
        --radius-sm: 8px;
    }

    [data-theme="light"] {
        --bg-dark: #F8F9FA;
        --bg-sidebar: #FFFFFF;
        --bg-card: #FFFFFF;
        --text-primary: #1A1A1A;
        --text-secondary: #6C757D;
        --border-color: rgba(0, 0, 0, 0.08);
        --input-bg: rgba(0, 0, 0, 0.03);
        --accent-green: #9CE052;
    }

    body {
        @apply bg-[var(--bg-dark)] text-[var(--text-primary)] antialiased;
    }
}

@layer utilities {
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .bento-card {
        @apply bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[var(--radius-lg)] p-6 transition-all duration-200 hover:border-[var(--accent-green)]/30;
    }

    .btn-modern {
        @apply px-6 py-2.5 rounded-xl font-bold text-sm transition-all active:scale-95;
    }

    .btn-primary {
        @apply bg-[var(--accent-green)] text-black hover:bg-[var(--accent-green)]/90 shadow-lg shadow-[var(--accent-green)]/10;
    }

    .input-modern {
        @apply bg-[var(--input-bg)] border border-[var(--border-color)] rounded-xl px-4 py-2.5 text-sm focus:ring-2 focus:ring-[var(--accent-green)]/20 focus:border-[var(--accent-green)] transition-all;
    }
}