:root {
  /* Editable theme colors */
  --color-primary: #111111;
  --color-primary-600: #0f0f0f;
  --color-primary-700: #0a0a0a;

  --color-secondary: #4b5563; /* slate-600 */
  --color-secondary-600: #374151;
  --color-secondary-700: #1f2937;

  --color-accent: #FE828C;
  --color-accent-600: #F2E2CF;
  --color-accent-700: #E6D1B6;
}

/* Map common Tailwind black utilities to primary color */
.text-black { color: var(--color-primary) !important; }
.bg-black { background-color: var(--color-primary) !important; }
.border-black { border-color: var(--color-primary) !important; }
.hover\:text-black:hover { color: var(--color-primary) !important; }
.hover\:bg-black:hover { background-color: var(--color-primary) !important; }
.focus\:ring-black:focus { --tw-ring-color: var(--color-primary) !important; }
.focus\:border-black:focus { border-color: var(--color-primary) !important; }

/* Accent helpers */
.text-accent { color: var(--color-accent) !important; }
.bg-accent { background-color: var(--color-accent) !important; }
.border-accent { border-color: var(--color-accent) !important; }

/* Secondary helpers */
.text-secondary { color: var(--color-secondary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }

/* Buttons */
.btn,
.btn-primary,
.btn-secondary,
.btn-accent {
  padding: 0.875rem 2rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-700); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

.btn-secondary { background: var(--color-secondary); color: #fff; }
.btn-secondary:hover { background: var(--color-secondary-700); }

.btn-accent { background: var(--color-accent); color: #fff; }
.btn-accent:hover { background: var(--color-accent-700); }

/* Outline button (used on shop/product) */
.btn-outline { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; }

/* Nav underline accent */
.nav-link::after { background: var(--color-primary); }

/* Promo banner gradient uses primary scale */
.promo-banner { background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-700) 100%); }

/* Pagination active override if using bg-black */
.pagination .active, a.bg-black { background-color: var(--color-primary) !important; color: #fff !important; }