@import '@fontsource/poppins/400.css';
@import '@fontsource/poppins/500.css';
@import '@fontsource/poppins/600.css';
@import '@fontsource/poppins/700.css';

@import 'tailwindcss';
/* @import '../../vendor/livewire/flux/dist/flux.css'; */

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';

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

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

    --container-7xl: 88rem;

    --color-primary: #004b69;
    --color-primary-foreground: #ffffff;
    --color-secondary: #036e9a;
    --color-secondary-foreground: #ffffff;
    --color-dark: #003f5e;
    --color-dark-foreground: #ffffff;

    --color-zinc-50: #fafafa;
    --color-zinc-100: #f5f5f5;
    --color-zinc-200: #e5e5e5;
    --color-zinc-300: #d4d4d4;
    --color-zinc-400: #a3a3a3;
    --color-zinc-500: #737373;
    --color-zinc-600: #525252;
    --color-zinc-700: #404040;
    --color-zinc-800: #262626;
    --color-zinc-900: #171717;
    --color-zinc-950: #0a0a0a;

    --color-accent: var(--color-neutral-800);
    --color-accent-content: var(--color-neutral-800);
    --color-accent-foreground: var(--color-white);
}

@layer theme {
    .dark {
        --color-accent: var(--color-white);
        --color-accent-content: var(--color-white);
        --color-accent-foreground: var(--color-neutral-800);
    }
}

@layer base {

    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }

    [x-cloak] {
        display: none !important;
    }
}

@layer components {
    .wysiwyg {
        :where(p) {
            margin-bottom: 0.75em;
        }

        :where(h1, h2, h3, h4) {
            font-weight: 700;
            color: var(--color-gray-800);
            margin-top: 1em;
            margin-bottom: 0.5em;
        }

        :where(h1) {
            font-size: 1.5em;
        }

        :where(h2) {
            font-size: 1.25em;
        }

        :where(h3) {
            font-size: 1.125em;
        }

        :where(h4) {
            font-size: 1em;
        }

        :where(ul, ol) {
            margin: 0.75em 0;
            padding-left: 1.5em;
        }

        :where(ul) {
            list-style-type: disc;
        }

        :where(ol) {
            list-style-type: decimal;
        }

        :where(li) {
            margin-bottom: 0.25em;
        }

        :where(a) {
            color: var(--color-primary);
            text-decoration: underline;
        }

        :where(strong, b) {
            font-weight: 700;
        }

        :where(em, i) {
            font-style: italic;
        }

        > :last-child {
            margin-bottom: 0;
        }
    }
}

[data-flux-field]:not(ui-radio, ui-checkbox) {
    @apply grid gap-2;
}

[data-flux-label] {
    @apply  !mb-0 !leading-tight;
}

input:focus[data-flux-control],
textarea:focus[data-flux-control],
select:focus[data-flux-control] {
    @apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
}

/* \[:where(&)\]:size-4 {
    @apply size-4;
} */