@import 'tailwindcss';

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

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

    /* Phosphoric (neon) yellow — brand accent (backgrounds/rings, same in both themes) */
    --color-brand-50: #fdffe3;
    --color-brand-100: #f9ffbd;
    --color-brand-200: #f2ff85;
    --color-brand-300: #e6ff33;
    --color-brand-400: #d4f500;
    --color-brand-500: #bcdb00;
    --color-brand-600: #93ab00;
    --color-brand-700: #6f8000;
    --color-brand-800: #57640a;
    --color-brand-900: #49540f;
    --color-brand-950: #262f00;

    /* Fixed dark ink surfaces — used by the hero banner in BOTH themes */
    --color-ink-950: #0a0a0a;
    --color-ink-900: #121212;
    --color-ink-850: #181818;
    --color-ink-800: #232323;
    --color-ink-700: #2e2e2e;

    /* Semantic tokens — LIGHT theme defaults (flip under .dark) */
    --color-bg: #f6f7f8;        /* page background */
    --color-surface: #ffffff;   /* cards */
    --color-surface2: #eef0f2;  /* inputs / image placeholders */
    --color-line: #e5e7eb;      /* borders */
    --color-line2: #d4d7dd;     /* stronger borders */
    --color-fg: #0d0f12;        /* headings / strong text */
    --color-body: #2a2d33;      /* normal text */
    --color-muted: #6b7280;     /* secondary text */
    --color-faint: #9ca3af;     /* tertiary text / icons */
    --color-accent: #8a7a00;    /* accent text/links (warm gold — readable on light) */
}

/* DARK theme overrides */
.dark {
    --color-bg: #0a0a0a;
    --color-surface: #121212;
    --color-surface2: #181818;
    --color-line: #232323;
    --color-line2: #2e2e2e;
    --color-fg: #ffffff;
    --color-body: #e4e4e7;
    --color-muted: #a1a1aa;
    --color-faint: #71717a;
    --color-accent: #d4f500;    /* phosphoric yellow pops on dark */
}

@layer base {
    body {
        @apply bg-bg text-body antialiased;
    }

    ::selection {
        @apply bg-brand-400 text-black;
    }
}

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

/* Fix browser autofill painting a white background over dark inputs */
input:-webkit-autofill,
input:-webkit-autofill:hover,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--color-body);
    -webkit-box-shadow: 0 0 0 1000px var(--color-surface2) inset;
    box-shadow: 0 0 0 1000px var(--color-surface2) inset;
    caret-color: var(--color-body);
    border-color: var(--color-line2);
    transition: background-color 9999s ease-in-out 0s;
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-brand-400) 22%, transparent), 0 0 0 1000px var(--color-surface) inset;
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-brand-400) 22%, transparent), 0 0 0 1000px var(--color-surface) inset;
    border-color: var(--color-brand-400);
}

/* Theme toggle icons */
.theme-icon-sun { display: none; }
.dark .theme-icon-sun { display: inline; }
.dark .theme-icon-moon { display: none; }

/* Logo swap per theme */
.dm-logo-dark { display: none; }
.dark .dm-logo-dark { display: block; }
.dark .dm-logo-light { display: none; }

/* ---------- Polished form controls ---------- */
@layer components {
    .dm-label {
        @apply mb-1.5 flex items-center gap-1 text-sm font-semibold text-body;
    }

    .dm-field {
        @apply w-full rounded-xl border bg-surface2 px-4 py-3 text-sm text-body;
        border-color: var(--color-line2);
        transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
        outline: none;
    }

    .dm-field::placeholder {
        color: var(--color-faint);
    }

    .dm-field:hover {
        border-color: color-mix(in oklab, var(--color-brand-400) 45%, var(--color-line2));
    }

    .dm-field:focus {
        border-color: var(--color-brand-400);
        background-color: var(--color-surface);
        box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-brand-400) 22%, transparent);
    }

    .dm-field:disabled {
        @apply cursor-not-allowed opacity-50;
    }

    .dm-select {
        @apply cursor-pointer;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af' stroke-width='2.2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: left 0.9rem center;
        background-size: 1.1rem;
        padding-inline-end: 2.6rem;
    }
}

/* ---------- Animations ---------- */
@keyframes dm-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes dm-pop {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: scale(1); }
}

.dm-reveal {
    animation: dm-rise .55s cubic-bezier(.2, .7, .2, 1) both;
}

.dm-pop {
    animation: dm-pop .3s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .dm-reveal, .dm-pop { animation: none; }
}