:root {
  /* Site Config Colors */
  --primary-color: #337357; /* Forest Green */
  --secondary-color: #5F6F52; /* Olive */
  --accent-color: #F59D2A; /* Orange */
  --background-color: #EAE4D5; /* Beige */
  --text-color: #1F2937;
  --white-color: #FFFFFF;
  --highlight-color: #D35400; /* Dark Orange */
  
  /* Fonts */
  --heading-font: 'Roboto Condensed', sans-serif;
  --body-font: 'Roboto', sans-serif;
  
  /* Layout */
  --container-width: 1100px;
  --product-img-width: 350px;
}

body {
  font-family: var(--body-font);
  background-color: var(--background-color);
  color: var(--text-color);
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  font-family: var(--heading-font);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Dot Pattern */
.bg-dots {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0; opacity: 0.15;
  background-image: radial-gradient(var(--primary-color) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Cards */
.bold-card {
  background-color: var(--white-color);
  border: 3px solid var(--text-color);
  box-shadow: 6px 6px 0px var(--text-color);
  transition: transform 0.2s;
}

.bold-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0px var(--text-color);
}

/* Buttons */
.btn-action {
  background-color: var(--accent-color);
  color: var(--text-color);
  border: 2px solid var(--text-color);
  font-family: var(--heading-font);
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 4px 4px 0px var(--text-color);
}
.btn-action:hover {
  background-color: var(--highlight-color);
  color: white;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--text-color);
}

/* Header Footer */
header {
  background-color: var(--primary-color);
  color: var(--white-color);
  border-bottom: 3px solid var(--text-color);
}
footer {
  background-color: var(--text-color);
  color: var(--background-color);
}

/* Testimonials */
.testi-section {
  background-color: var(--secondary-color);
  color: var(--white-color);
  border-top: 3px solid var(--text-color);
}
.testi-card {
  background-color: var(--primary-color);
  border: 2px solid var(--white-color);
}