/* === Neutral, professional palette === */
:root {
  /* Accents and text */
  --color-primary: #2f3541;    /* graphite (buttons, accents) */
  --color-accent:  #434a57;    /* hover/darker graphite */
  --color-dark:    #0b0f14;    /* ink on light surfaces */
  --color-ink-on-dark: #f8fafc; /* text on dark surfaces */
  --color-error:   #ef4444;

  /* Surfaces */
  --surface:       #ffffff;
  --surface-muted: #f3f4f6;

  /* Gradient stops (upward: dark -> light) */
  --gradient-bottom: #0b0f14;  /* rich black */
  --gradient-mid:    #1f2937;  /* slate-800 */
  --gradient-top:    #e5e7eb;  /* slate-200 */
}

/* === Base / background gradient === */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  color: var(--color-dark);
  background: linear-gradient(to top, var(--gradient-bottom) 0%, var(--gradient-mid) 45%, var(--gradient-top) 100%);
  background-attachment: fixed;
}

h1, h2, h3, h4 {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  color: var(--color-dark);
}

/* === Layout Sections === */
section {
  padding-top: 60px;
  padding-bottom: 60px;
}

.bg-white, .bg-light {
  color: var(--color-dark);
}

/* === Header & Typography === */
.site-header {
  background: transparent;
}
.site-title {
  font-size: 2.25rem;
  letter-spacing: 0.3px;
}
.site-subtitle {
  color: #475569;
  font-size: 1.1rem;
}

/* === Buttons === */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  transition: all 0.2s ease;
}
.btn-primary:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.3);
}
.btn-primary:active { transform: translateY(1px); }

.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: transparent;
}
.btn-outline-primary:hover {
  color: #ffffff;
  background-color: var(--color-primary);
}

/* === Static Cards (Used in Admin & Layout) === */
.card {
  background: var(--surface);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  /* Hover effects removed from base card class to keep Admin static */
}

/* === Interactive Product Cards (Storefront Only) === */
.product-card {
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(17, 24, 39, 0.2) !important;
  border-color: var(--color-primary);
}

.product-card .card-img-top {
  height: 220px;
  object-fit: cover;
  border-bottom: 1px solid #e5e7eb;
  transition: transform 0.5s ease;
}

.product-card:hover img {
  transform: scale(1.05);
}

/* === Admin Specific: Drag and Drop Area === */
#drop-area {
  border-style: dashed !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#drop-area.highlight {
  background-color: #e9ecef;
  border-color: var(--color-accent) !important;
}

#drop-area p {
  pointer-events: none;
}

/* === Footer === */
footer {
  background-color: var(--color-primary) !important;
}
footer p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-ink-on-dark);
}

/* === Accessibility === */
a:focus, button:focus, .btn:focus {
  outline: 3px solid #94a3b8;
  outline-offset: 2px;
}
a {
  color: #1f2937;
  text-decoration: none;
}
a:hover {
  color: #111827;
}