/* --- Premium Textile Design System --- */
:root {
  --bg-cream: #FDFBF7;
  --bg-white: #FFFFFF;
  --primary-blue: #2481CC;
  --primary-blue-hover: #1B659D;
  --text-main: #1E293B;
  --text-muted: #64748B;
  --border-light: #E2E8F0;
  --shadow-subtle: 0 10px 30px rgba(36, 129, 204, 0.06);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.04);
}

body {
  background-color: var(--bg-cream);
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
}

header, footer {
  background-color: var(--bg-white);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 20px 40px;
}

.product-card {
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-card);
}

.btn-primary {
  background-color: var(--primary-blue);
  color: var(--bg-white);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: var(--primary-blue-hover);
}

/* Integration with the existing site: keep the supplied design system authoritative
   even where the previous theme used stronger selectors or !important rules. */
html body {
  background-color: var(--bg-cream) !important;
  color: var(--text-main) !important;
}

html body header,
html body .site-header,
html body .nav-blur,
html body header.site-header,
html body header.nav-blur,
html body footer,
html body .site-footer {
  background: var(--bg-white) !important;
  background-color: var(--bg-white) !important;
  background-image: none !important;
  border-top-color: var(--border-light) !important;
  border-bottom-color: var(--border-light) !important;
}

html body .product-card {
  background-color: var(--bg-white) !important;
  border-color: var(--border-light) !important;
  box-shadow: var(--shadow-card) !important;
}

html body .btn-primary {
  background-color: var(--primary-blue) !important;
  color: var(--bg-white) !important;
  border: none !important;
}

html body .btn-primary:hover {
  background-color: var(--primary-blue-hover) !important;
}