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

@source '../views';
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';

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

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

    /* Stone — content & sidebar neutrals. */
    --color-stone-50: #f8fafc;
    --color-stone-100: #f1f5f9;
    --color-stone-200: #e2e8f0;
    --color-stone-300: #cbd5e1;
    --color-stone-400: #94a3b8;
    --color-stone-500: #64748b;
    --color-stone-600: #475569;
    --color-stone-700: #334155;
    --color-stone-800: #1e293b;
    --color-stone-900: #0f172a;
    --color-stone-950: #020617;

    /* Primary brand accent — purple, from the Printy Gifts logo. */
    --color-brand-50: #f5f3ff;
    --color-brand-100: #ede9fe;
    --color-brand-200: #ddd6fe;
    --color-brand-300: #c4b5fd;
    --color-brand-400: #a78bfa;
    --color-brand-500: #8b5cf6;
    --color-brand-600: #7c3aed;
    --color-brand-700: #6d28d9;
    --color-brand-800: #5b21b6;
    --color-brand-900: #4c1d95;
    --color-brand-950: #2e1065;

    /* Secondary brand accent — pink/magenta, from the logo's "Gifts" wordmark and ribbon. */
    --color-blush-50: #fff1f2;
    --color-blush-100: #ffe4e6;
    --color-blush-200: #fecdd3;
    --color-blush-300: #fda4af;
    --color-blush-400: #fb7185;
    --color-blush-500: #f43f5e;
    --color-blush-600: #e11d48;
    --color-blush-700: #be123c;
    --color-blush-800: #9f1239;
    --color-blush-900: #881337;
    --color-blush-950: #4c0519;

    /* Semantic status colors. */
    --color-success-50: #f0fdf4;
    --color-success-100: #dcfce7;
    --color-success-500: #22c55e;
    --color-success-600: #16a34a;
    --color-success-700: #15803d;

    --color-danger-50: #fff1f2;
    --color-danger-100: #ffe4e6;
    --color-danger-500: #ef4444;
    --color-danger-600: #dc2626;
    --color-danger-700: #b91c1c;

    --color-warning-50: #fffbeb;
    --color-warning-100: #fef3c7;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;

    --color-info-50: #eff6ff;
    --color-info-100: #dbeafe;
    --color-info-500: #3b82f6;
    --color-info-600: #2563eb;

    --color-accent: var(--color-brand-600);
    --color-accent-content: var(--color-white);
    --color-accent-foreground: var(--color-white);

    --shadow-panel: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 8px 24px -8px rgb(15 23 42 / 0.10);
}

@layer theme {
    .dark {
        --color-accent: var(--color-brand-400);
        --color-accent-content: var(--color-stone-950);
        --color-accent-foreground: var(--color-stone-950);
    }
}

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

    html {
        font-family: var(--font-sans);
    }

    input:focus, textarea:focus, select:focus {
        --tw-ring-color: var(--color-brand-500);
    }

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

.scroll-dark {
    scrollbar-width: thin;
    scrollbar-color: var(--color-stone-600) transparent;
}

.scroll-dark::-webkit-scrollbar {
    width: 10px;
}

.scroll-dark::-webkit-scrollbar-track {
    background: transparent;
}

.scroll-dark::-webkit-scrollbar-thumb {
    background-color: var(--color-stone-600);
    border-radius: 9999px;
    border: 2px solid var(--color-stone-950);
}

.scroll-dark::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-stone-500);
}

[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;
}