@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ============================================================
   YUREI-INSPIRED DARK FOREST GREEN LUXURY THEME
   Primary: #111111 | Text: #0a0a0a | Cream: #ffffff
   ============================================================ */

:root {
    /* Core Palette — Yurei Forest Green */
    --forest:       #111111;
    --forest-dark:  #000000;
    --forest-mid:   #2a5244;
    --forest-light: #3a6b5a;
    --cream:        #ffffff;
    --cream-light:  #f5f0e8;

    /* Backgrounds */
    --bg-primary:   #ffffff;
    --bg-secondary: #f5f7f5;
    --bg-tertiary:  #ebf0ed;
    --bg-accent:    #e2ebe7;
    --bg-luxury:    #0a0a0a;

    /* Borders */
    --border-primary:   #e2e8e5;
    --border-secondary: #c8d8d2;
    --border-forest:    #111111;

    /* Text */
    --text-primary:   #0a0a0a;
    --text-secondary: #4a6560;
    --text-tertiary:  #7a9990;
    --text-forest:    #111111;
    --text-cream:     #ffffff;

    /* Accents */
    --accent-primary:       #111111;
    --accent-primary-hover: #000000;
    --accent-primary-light: #d4e8df;
    --accent-gold:          #c9a84c;
    --accent-gold-hover:    #a8893a;
    --accent-green:         #059669;
    --accent-green-hover:   #047857;
    --accent-red:           #dc2626;
    --accent-red-hover:     #b91c1c;

    /* Shadows */
    --shadow-light:  0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-medium: 0 4px 6px -1px rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.07);
    --shadow-large:  0 10px 20px -3px rgba(0,0,0,0.18), 0 4px 8px -2px rgba(0,0,0,0.1);
    --shadow-forest: 0 0 20px rgba(29,60,52,0.25);
}

/* ── Base ── */
html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

/* ── Global Tailwind colour overrides ── */

/* Body background */
.bg-rose-50,
body.bg-rose-50 { background-color: var(--bg-secondary) !important; }
.bg-rose-100    { background-color: var(--bg-tertiary) !important; }
.bg-rose-200    { background-color: var(--bg-accent) !important; }
.bg-rose-500,
.bg-pink-500    { background-color: var(--forest) !important; }
.bg-rose-600,
.bg-pink-600    { background-color: var(--forest) !important; }
.bg-rose-700,
.bg-pink-700    { background-color: var(--forest-dark) !important; }
.bg-rose-800    { background-color: var(--forest-dark) !important; }
.bg-rose-900,
.bg-rose-950    { background-color: var(--forest-dark) !important; }

/* Rose/pink text */
.text-rose-200  { color: var(--cream) !important; }
.text-rose-300  { color: var(--cream-light) !important; }
.text-rose-500,
.text-pink-500  { color: var(--forest-mid) !important; }
.text-rose-600,
.text-pink-600  { color: var(--forest) !important; }
.text-rose-700,
.text-pink-700  { color: var(--forest) !important; }
.text-rose-800,
.text-pink-800  { color: var(--forest-dark) !important; }
.text-rose-900,
.text-pink-900  { color: var(--forest-dark) !important; }

/* Rose/pink borders */
.border-rose-50,
.border-rose-100 { border-color: var(--border-primary) !important; }
.border-rose-200 { border-color: var(--border-secondary) !important; }
.border-rose-300 { border-color: #a8c4bb !important; }
.border-rose-500,
.border-pink-500 { border-color: var(--forest-mid) !important; }
.border-rose-700 { border-color: var(--forest) !important; }

/* Rose gradient backgrounds → forest green */
.from-rose-50,  .via-rose-50,  .to-rose-50  { --tw-gradient-from: var(--bg-secondary) !important; --tw-gradient-to: var(--bg-secondary) !important; }
.from-rose-100, .via-rose-100, .to-rose-100  { --tw-gradient-from: var(--bg-tertiary) !important; --tw-gradient-to: var(--bg-tertiary) !important; }
.from-rose-700, .via-rose-700, .to-rose-700  { --tw-gradient-from: var(--forest) !important; --tw-gradient-to: var(--forest) !important; }
.from-rose-800, .via-rose-800, .to-rose-800  { --tw-gradient-from: var(--forest-dark) !important; --tw-gradient-to: var(--forest-dark) !important; }
.from-rose-900, .via-rose-900, .to-rose-900  { --tw-gradient-from: var(--forest-dark) !important; --tw-gradient-to: var(--forest-dark) !important; }
.from-pink-600, .via-pink-600, .to-pink-600  { --tw-gradient-from: var(--forest) !important; --tw-gradient-to: var(--forest) !important; }
.from-pink-50,  .via-pink-50,  .to-pink-50   { --tw-gradient-from: var(--bg-secondary) !important; --tw-gradient-to: var(--bg-secondary) !important; }

/* Hover colour overrides */
.hover\:bg-rose-50:hover  { background-color: var(--bg-secondary) !important; }
.hover\:bg-rose-100:hover { background-color: var(--bg-tertiary) !important; }
.hover\:text-rose-600:hover,
.hover\:text-rose-700:hover,
.hover\:text-rose-800:hover { color: var(--forest-mid) !important; }
.hover\:border-rose-200:hover { border-color: var(--border-secondary) !important; }
.hover\:shadow-rose-200\/50:hover { --tw-shadow-color: rgba(29,60,52,0.15) !important; }

/* Focus ring */
.focus\:ring-rose-500:focus { --tw-ring-color: rgba(29,60,52,0.35) !important; }

/* ── Navigation ── */
nav.sticky,
nav[class*="bg-white"] {
    background: var(--forest) !important;
    border-bottom-color: var(--forest-dark) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Logo text — remove rose gradient, use cream colour */
nav .bg-clip-text.text-transparent,
nav a.bg-clip-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: var(--cream) !important;
    -webkit-text-fill-color: var(--cream) !important;
}

/* Nav tagline */
nav span[class*="text-rose"] {
    color: rgba(255,255,255,0.65) !important;
}

/* Nav links */
nav a[class*="text-gray-700"],
nav a[class*="text-rose"] {
    color: rgba(255,255,255,0.82) !important;
}
nav a[class*="text-gray-700"]:hover,
nav a[class*="text-rose"]:hover {
    color: #ffffff !important;
}

/* Nav underline accents */
nav a div[class*="bg-gradient"] {
    background: var(--cream) !important;
}

/* Nav cart / auth buttons */
nav a[class*="from-rose"],
nav a[class*="from-pink"] {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.3) !important;
    color: #ffffff !important;
}
nav a[class*="from-rose"]:hover,
nav a[class*="from-pink"]:hover {
    background: rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
}

/* Mobile hamburger */
nav button[class*="text-gray"],
nav button[class*="text-rose"] {
    color: rgba(255,255,255,0.85) !important;
}
nav button:hover {
    background: rgba(255,255,255,0.1) !important;
}

/* Mobile menu panel */
nav div[id="mobileMenu"] {
    background: var(--forest) !important;
    border-top-color: rgba(255,255,255,0.15) !important;
}
nav div[id="mobileMenu"] a {
    color: rgba(255,255,255,0.82) !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
}
nav div[id="mobileMenu"] a:hover { color: #ffffff !important; }

/* Cart badge */
nav span[class*="from-rose"],
nav span[class*="bg-rose"] {
    background: var(--cream) !important;
    color: var(--forest-dark) !important;
}

/* ── Hero / Body sections ── */
section[class*="bg-rose"] {
    background-color: var(--bg-secondary) !important;
}

/* ── Product Cards ── */
.product-card {
    transition: all 0.3s ease;
    background: #ffffff;
    border-color: var(--border-primary) !important;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 30px -5px rgba(0,0,0,0.2), 0 10px 12px -5px rgba(0,0,0,0.12) !important;
    border-color: var(--forest) !important;
}

/* Product image placeholder bg */
div[class*="from-rose-50"].relative,
div.relative[class*="from-rose"],
div[class*="from-rose-50"][class*="to-pink"] {
    background: var(--bg-tertiary) !important;
}

/* Price badge on product cards — forest green like Yurei */
div[class*="bg-white/95"][class*="rounded-full"],
.absolute.top-4.right-4[class*="bg-white"] {
    background: var(--forest) !important;
    border-color: var(--forest-dark) !important;
}
div[class*="bg-white/95"][class*="rounded-full"] span,
.absolute.top-4.right-4[class*="bg-white"] span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ── About / Stat cards ── */
div[class*="bg-white"][class*="rounded-xl"][class*="border-gold"] .text-rose-700 {
    color: var(--forest) !important;
}

/* ── Feature / Info cards ── */
.card {
    transition: all 0.3s ease;
    background: #ffffff;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 24px -5px rgba(0,0,0,0.2) !important;
}
.feature-card {
    transition: all 0.3s ease;
}
.feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--forest) !important;
}

/* ── Footer ── */
footer[class*="from-rose"],
footer[class*="bg-rose"] {
    background: var(--forest-dark) !important;
    border-top-color: rgba(201,168,76,0.2) !important;
}
footer p[class*="text-rose"],
footer span[class*="text-rose"],
footer li a[class*="text-rose"] {
    color: rgba(255,255,255,0.7) !important;
}
footer li a[class*="text-rose"]:hover {
    color: var(--cream) !important;
}

/* ── Form Inputs ── */
.input-light {
    background-color: #ffffff;
    border: 2px solid var(--border-primary);
    color: var(--text-primary);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}
.input-light:focus {
    outline: none;
    border-color: var(--forest);
    box-shadow: 0 0 0 3px rgba(29,60,52,0.12);
}
.input-light::placeholder { color: var(--text-tertiary); }

.input-dark {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    border-radius: 0.375rem;
}
.input-dark:focus {
    outline: none;
    border-color: var(--forest);
    box-shadow: 0 0 0 2px rgba(29,60,52,0.2);
}
.input-dark::placeholder { color: var(--text-tertiary); }

/* Inline search inputs with rose classes */
input[class*="bg-rose"],
input[class*="border-rose"] {
    background-color: #ffffff !important;
    border-color: var(--border-secondary) !important;
}
input[class*="focus:ring-rose"]:focus,
input[class*="focus:border-rose"]:focus {
    border-color: var(--forest) !important;
    box-shadow: 0 0 0 2px rgba(29,60,52,0.15) !important;
}

/* ── Buttons ── */
.btn-primary {
    background-color: var(--accent-primary);
    color: white;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-medium);
}
.btn-primary:hover {
    background-color: var(--accent-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-large);
}

.btn-gold {
    background-color: var(--accent-gold);
    color: var(--forest-dark);
    transition: all 0.3s ease;
    box-shadow: 0 0 16px rgba(201,168,76,0.3);
}
.btn-gold:hover {
    background-color: var(--accent-gold-hover);
    transform: translateY(-1px);
    box-shadow: 0 0 22px rgba(201,168,76,0.45);
}

.btn-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    transition: background-color 0.3s ease;
}
.btn-secondary:hover { background-color: var(--border-secondary); }

/* ── Sidebar ── */
.sidebar { transition: transform 0.3s ease; }
@media (max-width: 1024px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.active { transform: translateX(0); }
}

/* ── Status Badges ── */
.status-badge {
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.status-pending    { background-color: rgba(251,191,36,0.1);  color: #d97706; border: 1px solid rgba(251,191,36,0.3); }
.status-processing { background-color: rgba(29,60,52,0.1);    color: var(--forest); border: 1px solid rgba(29,60,52,0.3); }
.status-completed  { background-color: rgba(34,197,94,0.1);   color: var(--accent-green); border: 1px solid rgba(34,197,94,0.3); }
.status-cancelled  { background-color: rgba(239,68,68,0.1);   color: var(--accent-red); border: 1px solid rgba(239,68,68,0.3); }

/* ── Animations ── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.3s ease-out; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--bg-accent); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-secondary); }

/* ── Placeholder text ── */
.placeholder-rose-400::placeholder { color: var(--text-tertiary) !important; }
.placeholder-rose-500::placeholder { color: var(--text-secondary) !important; }

/* ── Opacity variants (Tailwind bg-rose-*/xx) ── */
[class*="bg-rose-"][class*="/"]  { background-color: var(--bg-tertiary) !important; }
[class*="border-rose-"][class*="/"] { border-color: var(--border-primary) !important; }

/* ── Rose submit / CTA buttons ── */
button[class*="from-rose"],
a[class*="from-rose-6"],
a[class*="from-rose-7"],
input[type="submit"][class*="from-rose"] {
    background: var(--forest) !important;
    border-color: var(--forest-dark) !important;
    color: #ffffff !important;
}
button[class*="from-rose"]:hover,
a[class*="from-rose-6"]:hover,
a[class*="from-rose-7"]:hover {
    background: var(--forest-dark) !important;
    color: #ffffff !important;
}

/* ── Stat/info divs with text-rose inside white cards ── */
.text-rose-700 { color: var(--forest) !important; }
.text-rose-600 { color: var(--forest) !important; }
.text-rose-500 { color: var(--forest-mid) !important; }
.text-rose-400 { color: var(--forest-light) !important; }

/* ── Select / textarea with rose background ── */
select[class*="bg-rose"],
textarea[class*="bg-rose"],
input[class*="bg-rose"] {
    background-color: #ffffff !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}

/* ── Dashboard nav items ── */
button[class*="text-rose"],
button[class*="border-rose"] {
    color: var(--forest) !important;
    border-color: var(--forest) !important;
}

/* ── Gradient text in headings / cards ── */
h1.bg-clip-text, h2.bg-clip-text, h3.bg-clip-text,
h4.bg-clip-text, span.bg-clip-text, p.bg-clip-text {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: var(--forest) !important;
    -webkit-text-fill-color: var(--forest) !important;
}