@layer theme, base, components, pages, utilities;

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

@import "./base.css" layer(base);
@import "./components.css" layer(components);

@import "tailwindcss";

@import "./pages.css" layer(pages);
@import "highlight.js/styles/atom-one-dark.css" layer(components); /* Just for demo purpose only for highlighting code */

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

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

    --color-navy-50: #e7e9ef;
    --color-navy-100: #c2c9d6;
    --color-navy-200: #a3adc2;
    --color-navy-300: #697a9b;
    --color-navy-400: #5c6b8a;
    --color-navy-450: #465675;
    --color-navy-500: #384766;
    --color-navy-600: #313e59;
    --color-navy-700: #26334d;
    --color-navy-750: #222e45;
    --color-navy-800: #202b40;
    --color-navy-900: #192132;

    --color-slate-150: #e9eef5;

    --color-primary: #4f46e5;
    --color-primary-focus: #4338ca;
    --color-secondary-light: #ff57d8;
    --color-secondary: #f000b9;
    --color-secondary-focus: #bd0090;
    --color-accent-light: #818cf8;
    --color-accent: #5f5af6;
    --color-accent-focus: #4d47f5;
    --color-info: #0ea5e9;
    --color-info-focus: #0284c7;
    --color-success: #10b981;
    --color-success-focus: #059669;
    --color-warning: #ff9800;
    --color-warning-focus: #e68200;
    --color-error: #ff5724;
    --color-error-focus: #f03000;

    --shadow-soft: 0 3px 10px 0 rgb(48 46 56 / 6%);
    --shadow-soft-dark: 0 3px 10px 0 rgb(25 33 50 / 30%);

    --text-tiny: 0.625rem;
    --text-tiny--line-height: 0.8125rem;

    --text-tiny-plus: 0.6875rem;
    --text-tiny-plus--line-height: 0.875rem;

    --text-xs-plus: 0.8125rem;
    --text-xs-plus--line-height: 1.125rem;

    --text-sm-plus: 0.9375rem;
    --text-sm-plus--line-height: 1.375rem;

    --animate-shimmer: shimmer 2s linear infinite;

    @keyframes shimmer {
        from {
            background-position: 0 0;
        }
        to {
            background-position: -200% 0;
        }
    }
}

@layer base {
    @keyframes fade-out {
        0% {
            opacity: 1;
            visibility: visible;
        }
        100% {
            opacity: 0;
            visibility: hidden;
        }
    }
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}