/* Zen Theme - Wellness/Spa Store */
/* Calming colors, lots of whitespace, meditation feel */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Quicksand:wght@400;500;600&display=swap');

:root {
  --primary: #78716C;
  --primary-rgb: 120, 113, 108;
  --primary-dark: #57534E;
  --hov-primary: #57534E;
  --soft-primary: rgba(120, 113, 108, 0.1);
  --secondary: #57534E;
  --accent: #A8A29E;
  --success: #10B981;
  --warning: #D97706;
  --danger: #DC2626;
  --light: #FAFAF9;
  --dark: #44403C;
  --gray: #A8A29E;
  --gray-light: #D6D3D1;
  --background: #FAFAF9;
  --card-bg: #FFFFFF;
  --border-color: #E7E5E4;
  --border-radius: 8px;
  --font-primary: 'Quicksand', sans-serif;
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --radius-sm: 0.5rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.5rem;
}

body {
  font-family: var(--font-primary);
  background: var(--background);
  color: var(--dark);
  font-weight: 500;
  line-height: 1.8;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0.05em;
}

.btn-primary {
  background: var(--secondary);
  border: none;
  border-radius: 100px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

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

.card {
  background: var(--card-bg);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}