@import 'tailwindcss';

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

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

    /* Ink — the dark canvas the whole site sits on. */
    --color-ink-950: #07070c;
    --color-ink-900: #0d0d16;
    --color-ink-800: #14141f;
    --color-ink-700: #1d1d2b;
    --color-ink-600: #2a2a3d;

    /* Accent — violet through fuchsia, used for CTAs and premium markers. */
    --color-brand-300: #c4b5fd;
    --color-brand-400: #a78bfa;
    --color-brand-500: #8b5cf6;
    --color-brand-600: #7c3aed;
    --color-brand-700: #6d28d9;
}

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        background-color: var(--color-ink-950);
        color: #e6e6f0;
    }
}

@layer components {
    /* Shared surface for cards, panels and form wells. */
    .surface {
        background-color: color-mix(in oklab, var(--color-ink-800) 85%, transparent);
        border: 1px solid var(--color-ink-700);
        border-radius: 1rem;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border-radius: 0.75rem;
        padding: 0.625rem 1.25rem;
        font-weight: 600;
        font-size: 0.875rem;
        transition: all 150ms ease;
        cursor: pointer;
    }

    .btn-primary {
        background-image: linear-gradient(to right, var(--color-brand-600), #d946ef);
        color: #fff;
        box-shadow: 0 10px 30px -12px var(--color-brand-500);
    }

    .btn-primary:hover {
        filter: brightness(1.1);
    }

    .btn-ghost {
        background-color: var(--color-ink-700);
        color: #e6e6f0;
        border: 1px solid var(--color-ink-600);
    }

    .btn-ghost:hover {
        background-color: var(--color-ink-600);
    }

    .field {
        width: 100%;
        border-radius: 0.75rem;
        background-color: var(--color-ink-900);
        border: 1px solid var(--color-ink-600);
        padding: 0.625rem 0.875rem;
        font-size: 0.875rem;
        color: #e6e6f0;
    }

    .field:focus {
        outline: none;
        border-color: var(--color-brand-500);
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-brand-500) 25%, transparent);
    }

    .label {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #9494ad;
        margin-bottom: 0.375rem;
    }
}