/* ==========================================================================
   THEME — Palet Hijau / Sand / Terracotta
   Dibangun di ATAS Bootstrap 5, bukan menimpa total — biar utility class
   Bootstrap (spacing, grid, flex) tetap kepake, tapi warna & nuansa custom.
   ========================================================================== */

:root {
  /* --- Brand palette --- */
  --brand-green-900: #1f3d2b;
  --brand-green-700: #2f5d3f;
  --brand-green-500: #4a7c59;
  --brand-green-100: #e3ece4;

  --brand-sand-100: #f7f2e9;
  --brand-sand-200: #efe6d4;
  --brand-sand-300: #e2d3b3;

  --brand-terracotta-600: #c1592c;
  --brand-terracotta-500: #d6713f;
  --brand-terracotta-100: #f5e2d6;

  --brand-ink: #23291f;
  --brand-ink-soft: #5b6357;

  /* --- Semantic mapping (dipakai di komponen) --- */
  --color-bg: var(--brand-sand-100);
  --color-surface: #ffffff;
  --color-primary: var(--brand-green-700);
  --color-primary-dark: var(--brand-green-900);
  --color-accent: var(--brand-terracotta-600);
  --color-text: var(--brand-ink);
  --color-text-soft: var(--brand-ink-soft);
  --color-border: var(--brand-sand-300);

  /* --- Typography --- */
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  /* --- Motion --- */
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Override beberapa Bootstrap CSS var global (Bootstrap 5.3+) --- */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 47, 93, 63;
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-dark);
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
}

h1, h2, h3, h4, .font-serif {
  font-family: var(--font-serif);
  color: var(--color-primary-dark);
}

a {
  transition: color var(--transition-base);
}

/* Override tombol primary Bootstrap biar gak biru default & punya karakter */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn-accent {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.btn-accent:hover {
  background-color: var(--brand-terracotta-500);
  border-color: var(--brand-terracotta-500);
  color: #fff;
}

.text-accent { color: var(--color-accent) !important; }
.bg-surface { background-color: var(--color-surface) !important; }
.bg-brand-sand { background-color: var(--brand-sand-200) !important; }