@import 'tailwindcss';

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

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

    --color-primary-50: oklch(0.97 0.02 160);
    --color-primary-100: oklch(0.94 0.04 160);
    --color-primary-200: oklch(0.88 0.08 160);
    --color-primary-300: oklch(0.80 0.12 160);
    --color-primary-400: oklch(0.70 0.16 160);
    --color-primary-500: oklch(0.60 0.18 160);
    --color-primary-600: oklch(0.50 0.18 160);
    --color-primary-700: oklch(0.42 0.16 160);
    --color-primary-800: oklch(0.35 0.12 160);
    --color-primary-900: oklch(0.28 0.08 160);
    --color-primary-950: oklch(0.18 0.06 160);

    --color-accent-50: oklch(0.97 0.02 250);
    --color-accent-100: oklch(0.94 0.04 250);
    --color-accent-200: oklch(0.88 0.08 250);
    --color-accent-300: oklch(0.78 0.12 250);
    --color-accent-400: oklch(0.68 0.16 250);
    --color-accent-500: oklch(0.58 0.18 250);
    --color-accent-600: oklch(0.48 0.18 250);
    --color-accent-700: oklch(0.40 0.16 250);

    --color-surface-50: oklch(0.985 0.002 260);
    --color-surface-100: oklch(0.97 0.004 260);
    --color-surface-200: oklch(0.93 0.006 260);
    --color-surface-300: oklch(0.88 0.008 260);
    --color-surface-400: oklch(0.70 0.010 260);
    --color-surface-500: oklch(0.55 0.012 260);
    --color-surface-600: oklch(0.40 0.014 260);
    --color-surface-700: oklch(0.30 0.012 260);
    --color-surface-800: oklch(0.22 0.010 260);
    --color-surface-900: oklch(0.16 0.008 260);
    --color-surface-950: oklch(0.10 0.006 260);
}

/* Base layer styles */
@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        @apply bg-surface-50 text-surface-800 antialiased;
    }

    ::selection {
        @apply bg-primary-200 text-primary-900;
    }
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    @apply bg-surface-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-surface-300 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-surface-400;
}
