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

:root {
  --color-primary-dark: #1F2421;
  --color-warm-terracotta: #8F5B34;
  --color-terracotta-light: #C27D48;
  --color-sage: #5B7065;
  --color-sage-light: #8FA89B;
  --color-linen: #FAF7F2;
  --color-linen-dark: #F2ECE1;
  --color-sand: #E7DFD5;
  --color-border: #E2D9CC;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--color-primary-dark);
  background-color: var(--color-linen);
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-serif {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-linen);
}
::-webkit-scrollbar-thumb {
  background: var(--color-sand);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-warm-terracotta);
}

/* Subtle texture overlay */
.bg-linen {
  background-color: #FAF7F2;
}

.bg-linen-soft {
  background-color: #F4EFE6;
}

.text-terracotta {
  color: #8F5B34;
}

.bg-terracotta {
  background-color: #8F5B34;
}

.border-warm {
  border-color: #E2D9CC;
}

/* Button & Card Micro-Interactions */
.btn-primary {
  background-color: #8F5B34;
  color: #FFFFFF;
  transition: all 0.25s ease-in-out;
}
.btn-primary:hover {
  background-color: #724727;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(143, 91, 52, 0.25);
}

.btn-secondary {
  border: 1px solid #8F5B34;
  color: #8F5B34;
  background-color: transparent;
  transition: all 0.25s ease-in-out;
}
.btn-secondary:hover {
  background-color: #8F5B34;
  color: #FFFFFF;
}

.card-artisan {
  background: #FFFFFF;
  border: 1px solid #E6DFD5;
  border-radius: 12px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-artisan:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(31, 36, 33, 0.08);
  border-color: #D6C9BC;
}

/* Badge styling */
.badge-service {
  background-color: #EBF1EE;
  color: #43544C;
  border: 1px solid #CFDDD6;
}

/* Header Sticky shadow */
.header-scrolled {
  background: rgba(250, 247, 242, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}