@import 'tailwindcss';

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

@theme {
    --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --font-arabic: 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif;
    --color-brand-50: #eef6ff;
    --color-brand-100: #dcecff;
    --color-brand-200: #bcd8ff;
    --color-brand-300: #86bcff;
    --color-brand-400: #4f98ff;
    --color-brand-500: #1f6fe5;
    --color-brand-600: #1757b6;
    --color-brand-700: #124388;
    --color-brand-800: #0f3467;
    --color-brand-900: #0d274d;
    --color-ink-950: #09111f;
    --color-sand-50: #fbf7ef;
    --color-sand-200: #e6dcc5;
    --color-mint-300: #8bd6bf;
    --color-coral-400: #ef8354;
}

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

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

    body {
        @apply bg-sand-50 text-slate-900 antialiased transition-colors duration-500 dark:bg-ink-950 dark:text-slate-100;
    }

    ::selection {
        @apply bg-brand-400/25 text-slate-950;
    }
}

@layer components {
    .font-display {
        font-family: var(--font-display);
    }

    .font-arabic {
        font-family: var(--font-arabic);
    }

    .shell {
        @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
    }

    .nav-link {
        @apply relative text-sm font-semibold tracking-[0.14em] text-slate-700 uppercase transition hover:text-brand-600 dark:text-slate-300 dark:hover:text-brand-300;
    }

    .nav-link::after {
        @apply absolute -bottom-2 left-0 h-px w-full origin-left scale-x-0 bg-brand-500 transition-transform duration-300 content-[''];
    }

    .nav-link:hover::after,
    .nav-link.is-active::after {
        @apply scale-x-100;
    }

    .btn-primary {
        @apply inline-flex items-center justify-center gap-2 rounded-full bg-slate-950 px-6 py-3 text-sm font-semibold text-white transition hover:-translate-y-0.5 hover:bg-brand-600 dark:bg-white dark:text-slate-950 dark:hover:bg-brand-200;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center gap-2 rounded-full border border-slate-300/70 px-5 py-3 text-sm font-semibold text-slate-700 transition hover:-translate-y-0.5 hover:border-brand-400 hover:text-brand-600 dark:border-slate-700 dark:text-slate-100 dark:hover:border-brand-400 dark:hover:text-brand-300;
    }

    .surface-panel {
        @apply rounded-4xl border border-white/50 bg-white/70 shadow-[0_20px_70px_rgba(15,23,42,0.08)] backdrop-blur-xl dark:border-white/10 dark:bg-white/5 dark:shadow-[0_20px_70px_rgba(0,0,0,0.35)];
    }

    .section-kicker {
        @apply mb-4 inline-flex items-center gap-2 rounded-full border border-brand-200 bg-white/70 px-4 py-1.5 text-xs font-bold uppercase tracking-[0.26em] text-brand-700 dark:border-brand-500/30 dark:bg-brand-500/10 dark:text-brand-200;
    }

    .section-title {
        @apply font-display text-3xl font-bold leading-tight sm:text-4xl lg:text-5xl;
    }

    .section-copy {
        @apply max-w-2xl text-base leading-8 text-slate-600 dark:text-slate-300;
    }

    .admin-card {
        @apply rounded-[1.75rem] border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900;
    }

    .field {
        @apply w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition focus:border-brand-400 focus:ring-4 focus:ring-brand-400/10 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100;
    }

    .label {
        @apply mb-2 block text-sm font-semibold text-slate-700 dark:text-slate-200;
    }
}

@layer utilities {
    .bg-grid {
        background-image: linear-gradient(to right, rgba(15, 23, 42, 0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(15, 23, 42, 0.08) 1px, transparent 1px);
        background-size: 40px 40px;
    }

    .dark .bg-grid {
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    }

    .mask-fade-bottom {
        mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    }
}
