@import "tailwindcss";

/* ============================================================================
 * JamaliTech Next — Industrial Premium Marketplace Design System
 * Palette : Option A (Matte Black + Deep Orange + White + Steel Grey)
 * Type    : Barlow Condensed (display) + Barlow (body) + JetBrains Mono (specs)
 * ========================================================================== */

@theme {
    /* ---- Colors ---- */
    --color-ink-950:   #0a0a0c;
    --color-ink-900:   #111113;
    --color-ink-800:   #18181b;
    --color-ink-700:   #232329;
    --color-ink-600:   #2d2d34;
    --color-ink-500:   #3f3f46;

    --color-orange-700: #c4540a;
    --color-orange-600: #f56a00;
    --color-orange-500: #ff7a1a;
    --color-orange-400: #ff944d;
    --color-orange-50:  #fff3eb;

    --color-steel-700: #4b525d;
    --color-steel-600: #6b7280;
    --color-steel-500: #8a909a;
    --color-steel-400: #a8aeb8;
    --color-steel-300: #d4d7dd;
    --color-steel-200: #e7e9ee;
    --color-steel-100: #f0f2f7;

    --color-canvas:    #f0f2f7;
    --color-success:   #10b981;
    --color-warning:   #f59e0b;
    --color-danger:    #ef4444;
    --color-whatsapp:  #25d366;

    /* ---- Type (loaded via <link> in layout.tsx for build-portability) ---- */
    --font-display: 'Barlow Condensed', ui-sans-serif, system-ui, sans-serif;
    --font-sans:    'Barlow', ui-sans-serif, system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;

    /* ---- Spacing ---- */
    --spacing-section: 5rem;
    --spacing-section-lg: 7rem;
}

/* ---- Fonts (variable names set via next/font in layout.tsx) ---- */
:root {
    color-scheme: dark;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html, body { height: 100%; }
body {
    background: var(--color-ink-950);
    color: var(--color-steel-100);
    font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .font-display {
    font-family: var(--font-display), 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.05;
    text-transform: uppercase;
}

.font-mono, code, pre {
    font-family: var(--font-mono), 'JetBrains Mono', monospace;
}

/* ============================================================================
 * Utility classes — premium textures + effects
 * ========================================================================== */

/* SVG noise overlay (0.03 opacity grain) */
.bg-noise {
    position: relative;
}
.bg-noise::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.03;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Mesh gradient backgrounds */
.bg-mesh-orange {
    background:
        radial-gradient(at 20% 20%, rgba(245,106,0,0.18) 0%, transparent 50%),
        radial-gradient(at 80% 0%, rgba(245,106,0,0.10) 0%, transparent 50%),
        radial-gradient(at 0% 80%, rgba(196,84,10,0.18) 0%, transparent 60%),
        linear-gradient(135deg, #0a0a0c 0%, #18181b 100%);
}
.bg-mesh-steel {
    background:
        radial-gradient(at 30% 0%, rgba(107,114,128,0.18) 0%, transparent 60%),
        radial-gradient(at 80% 100%, rgba(245,106,0,0.10) 0%, transparent 60%),
        linear-gradient(180deg, #111113 0%, #0a0a0c 100%);
}
.bg-mesh-light {
    background:
        radial-gradient(at 10% 0%, rgba(245,106,0,0.06) 0%, transparent 60%),
        radial-gradient(at 90% 100%, rgba(107,114,128,0.10) 0%, transparent 60%),
        linear-gradient(180deg, #18181b 0%, #232329 100%);
}

/* Glassmorphism card */
.glass {
    background: rgba(35, 35, 41, 0.55);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.08);
}
.glass-light {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.06);
}

/* Diagonal clip dividers */
.clip-diag-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 0 100%); }
.clip-diag-top    { clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%); }

/* Border glow on hover (product cards) */
.border-glow {
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.border-glow:hover {
    box-shadow: 0 0 0 1px var(--color-orange-600), 0 18px 40px -10px rgba(245,106,0,0.25);
    transform: translateY(-4px);
}

/* Marquee */
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 28s linear infinite; }
.animate-marquee:hover { animation-play-state: paused; }

/* WhatsApp pulse */
@keyframes wa-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.6); }
    100% { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
}
.animate-wa-pulse { animation: wa-pulse 2.4s ease-out infinite; }

/* Hide scrollbars on horizontal scrollers */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Section padding helper */
.section-pad { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 768px)  { .section-pad { padding-top: 5.5rem; padding-bottom: 5.5rem; } }
@media (min-width: 1024px) { .section-pad { padding-top: 7rem;   padding-bottom: 7rem;   } }
@media (min-width: 1536px) { .section-pad { padding-top: 8.5rem; padding-bottom: 8.5rem; } }

/* Container — bounded for readability but expands generously on large screens */
.container-jt { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 480px)  { .container-jt { padding-inline: 1.25rem; } }
@media (min-width: 768px)  { .container-jt { padding-inline: 2rem; } }
@media (min-width: 1280px) { .container-jt { max-width: 1440px; padding-inline: 2.5rem; } }
@media (min-width: 1536px) { .container-jt { max-width: 1600px; padding-inline: 3rem; } }
@media (min-width: 1920px) { .container-jt { max-width: 1760px; padding-inline: 3.5rem; } }

/* Edge-to-edge content (used inside full-bleed sections) */
.container-fluid { width: 100%; padding-inline: 1rem; }
@media (min-width: 768px)  { .container-fluid { padding-inline: 2.5rem; } }
@media (min-width: 1280px) { .container-fluid { padding-inline: 4rem; } }
@media (min-width: 1536px) { .container-fluid { padding-inline: 5rem; } }

/* Underline gradient (active nav) */
.underline-orange {
    position: relative;
}
.underline-orange::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -8px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-orange-600), var(--color-orange-400));
    border-radius: 2px;
}

/* Selection */
::selection { background: var(--color-orange-600); color: #fff; }