@import 'tailwindcss';

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

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

    /* Override ALL Tailwind v4 gray shades — pure neutral, no blue tint */
    --color-gray-50:  #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e5e5e5;
    --color-gray-300: #d4d4d4;
    --color-gray-400: #a3a3a3;
    --color-gray-500: #737373;
    --color-gray-600: #525252;
    --color-gray-700: #404040;
    --color-gray-800: #262626;
    --color-gray-900: #171717;
    --color-gray-950: #0a0a0a;

    /* Kill ALL blue — map to neutral gray */
    --color-blue-50:  #fafafa;
    --color-blue-100: #f5f5f5;
    --color-blue-200: #e5e5e5;
    --color-blue-300: #d4d4d4;
    --color-blue-400: #a3a3a3;
    --color-blue-500: #737373;
    --color-blue-600: #404040;
    --color-blue-700: #262626;
    --color-blue-800: #171717;
    --color-blue-900: #0a0a0a;
    --color-blue-950: #000000;

    /* Kill slate — map to pure black/neutral */
    --color-slate-50:  #fafafa;
    --color-slate-100: #f5f5f5;
    --color-slate-200: #e5e5e5;
    --color-slate-300: #d4d4d4;
    --color-slate-400: #a3a3a3;
    --color-slate-500: #737373;
    --color-slate-600: #525252;
    --color-slate-700: #404040;
    --color-slate-800: #171717;
    --color-slate-900: #0a0a0a;
    --color-slate-950: #000000;
}

/* =============================================
   BASE — pure black background, consistent text
   ============================================= */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background-color: #000000;
}

body:not(.admin-body) {
    background-color: #000000 !important;
    color: #d4d4d4 !important;
    font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}

/* All paragraph/body text = same color */
p, li, span, div, td, th, label {
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Focus rings — red, not browser blue */
*:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}

/* =============================================
   SECTION BACKGROUNDS — scoped to customer pages
   ============================================= */
body:not(.admin-body) section {
    background-color: #000000 !important;
}

body:not(.admin-body) .bg-gray-900,
body:not(.admin-body) .bg-gray-950,
body:not(.admin-body) .bg-gray-800,
body:not(.admin-body) .bg-gray-700,
body:not(.admin-body) .bg-black {
    background-color: #000000 !important;
}

body:not(.admin-body) .bg-gray-900.rounded-lg,
body:not(.admin-body) .bg-gray-900.rounded-xl,
body:not(.admin-body) .bg-black.rounded-lg,
body:not(.admin-body) .bg-black.rounded-xl {
    background-color: #0d0d0d !important;
}

/* =============================================
   ACCENT COLORS
   ============================================= */
.bg-red-600        { background-color: #dc2626 !important; }
.bg-red-700        { background-color: #b91c1c !important; }
.bg-yellow-500     { background-color: #eab308 !important; }
.bg-yellow-600     { background-color: #ca8a04 !important; }
.bg-yellow-400     { background-color: #facc15 !important; }

/* =============================================
   TEXT — scoped to customer pages only
   ============================================= */
body:not(.admin-body) .text-white        { color: #f5f5f5 !important; }
body:not(.admin-body) .text-gray-300     { color: #d4d4d4 !important; }
body:not(.admin-body) .text-gray-400     { color: #a3a3a3 !important; }
body:not(.admin-body) .text-gray-500     { color: #737373 !important; }
body:not(.admin-body) .text-yellow-400   { color: #facc15 !important; }
body:not(.admin-body) .text-yellow-500   { color: #eab308 !important; }
body:not(.admin-body) .text-red-400      { color: #f87171 !important; }
body:not(.admin-body) .text-red-500      { color: #ef4444 !important; }

/* =============================================
   BORDERS
   ============================================= */
.border-red-600    { border-color: #dc2626 !important; }
.border-red-500    { border-color: #ef4444 !important; }
.border-yellow-400 { border-color: #facc15 !important; }
.border-yellow-500 { border-color: #eab308 !important; }
.border-gray-700   { border-color: #2a2a2a !important; }
.border-gray-600   { border-color: #404040 !important; }

/* =============================================
   NAV — scoped to customer pages only (not admin)
   Admin nav is fully controlled by CSS variables
   ============================================= */
body:not(.admin-body) nav {
    background-color: rgba(0, 0, 0, 0.97) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* =============================================
   FORM INPUTS — dark mode only on customer pages
   Admin inputs use .admin-input class with CSS vars
   ============================================= */
html.dark body:not(.admin-body) input:not(.form-input),
html.dark body:not(.admin-body) select:not(.form-input),
html.dark body:not(.admin-body) textarea:not(.form-input),
/* also target customer pages where html has no class (defaults dark) */
html:not(.light) body:not(.admin-body) input:not(.form-input),
html:not(.light) body:not(.admin-body) select:not(.form-input),
html:not(.light) body:not(.admin-body) textarea:not(.form-input) {
    background-color: #000000 !important;
    color: #d4d4d4 !important;
    border-color: #2a2a2a !important;
}

html.dark body:not(.admin-body) input:not(.form-input)::placeholder,
html.dark body:not(.admin-body) textarea:not(.form-input)::placeholder,
html:not(.light) body:not(.admin-body) input:not(.form-input)::placeholder,
html:not(.light) body:not(.admin-body) textarea:not(.form-input)::placeholder {
    color: #737373 !important;
}

html.dark body:not(.admin-body) input:not(.form-input):focus,
html.dark body:not(.admin-body) select:not(.form-input):focus,
html.dark body:not(.admin-body) textarea:not(.form-input):focus,
html:not(.light) body:not(.admin-body) input:not(.form-input):focus,
html:not(.light) body:not(.admin-body) select:not(.form-input):focus,
html:not(.light) body:not(.admin-body) textarea:not(.form-input):focus {
    border-color: #dc2626 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #dc2626 !important;
}

/* =============================================
   CARD BACKGROUNDS
   ============================================= */
.bg-gray-900.border,
.bg-black.border {
    background-color: #0d0d0d !important;
}

/* =============================================
   SELECTION
   ============================================= */
::selection {
    background-color: #dc2626;
    color: #ffffff;
}

/* =============================================
   SCROLLBAR
   ============================================= */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #000000; }
::-webkit-scrollbar-thumb { background: #dc2626; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #ef4444; }

/* =============================================
   FOOTER
   ============================================= */
footer {
    background-color: #000000 !important;
    border-top-color: rgba(220, 38, 38, 0.3) !important;
}

/* =============================================
   FOOD PHOTOGRAPHY ANIMATIONS
   ============================================= */

/* Floating seasoning particles */
@keyframes float-slow {
    0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.6; }
    25% { transform: translateY(-30px) translateX(10px); opacity: 0.8; }
    50% { transform: translateY(-60px) translateX(-5px); opacity: 0.4; }
    75% { transform: translateY(-30px) translateX(15px); opacity: 0.7; }
}

@keyframes float-slower {
    0%, 100% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0.5; }
    33% { transform: translateY(-40px) translateX(-15px) scale(1.2); opacity: 0.8; }
    66% { transform: translateY(-80px) translateX(10px) scale(0.8); opacity: 0.3; }
}

@keyframes float-fast {
    0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.7; }
    50% { transform: translateY(-50px) rotate(180deg); opacity: 0.3; }
}

.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
.animate-float-slower { animation: float-slower 12s ease-in-out infinite; }
.animate-float-fast { animation: float-fast 5s ease-in-out infinite; }

/* Radial gradient utility */
.bg-gradient-radial {
    background: radial-gradient(circle, var(--tw-gradient-stops));
}