/* ================= ROOT VARIABLES ================= */
:root {
  --main-color: #a66a00;
  --main-hover: #6d4501;
  --second-color: #1f4e5f;

  --text-dark: #1f2933;
  --text-muted: #6b7280;

  --bg-light: #f9f7f3;
  --bg-section: #f1ede4;
  --border-light: #e5e1d8;
  --white: #ffffff;

  --heading-font: 'Poppins', sans-serif;
  --body-font: 'Inter', sans-serif;

  --bg-soft: var(--bg-section);
  --bg-white: var(--white);
}

/* ================= GLOBAL ================= */
body {
  font-family: var(--body-font);
  color: var(--text-dark);
  background: var(--bg-light);
  font-size: 16px;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.section-title,
.btn {
  font-family: var(--heading-font);
}

.section-light {
  background: var(--white);
}

.section-soft {
  background: var(--bg-soft);
  padding: 100px 0;
}

.section-divider {
  border-top: 1px solid var(--border-light);
}

/* ================= BUTTONS ================= */
.btn {
  font-family: var(--heading-font);
  border-radius: 50px;
  transition: all 0.3s ease;
}
.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background-color: var(--main-color);
  border-color: var(--main-color);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--main-hover);
  border-color: var(--main-hover);
}

.btn-outline-primary {
  color: var(--main-color);
  border-color: var(--main-color);
}

.btn-outline-primary:hover {
  background-color: var(--main-color);
  color: #fff;
}

/* Custom button */
.custom-btn {
  background-color: var(--main-color);
  border: none;
  padding: 12px 30px;
  font-size: 0.95rem;
  border-radius: 50px;
}

.custom-btn:hover {
  background-color: var(--main-hover);
}