/* Tahap 3: warna, huruf, dan dasar tampilan.
   Palet: krem, putih gading, beige, cokelat muda, dengan aksen pastel yang lembut. */
:root {
  --bg: #f5efe3;
  --surface: #fbf8f1;
  --surface-2: #ece3d2;
  --border: #d9cdb8;
  --text: #3b2f26;
  --muted: #6f6050;
  --accent: #a9805b;
  --accent-strong: #7b5a3c;

  /* Aksen pastel (latar dan teks dipasangkan agar tetap terbaca) */
  --sage: #dfe6d3;
  --sage-text: #3f5230;
  --rose: #f0dcd5;
  --rose-text: #7a3b2e;
  --sand: #f1e6c8;
  --sand-text: #6b5316;
  --sky: #dde7ee;
  --sky-text: #35506a;

  --font-baca: Georgia, 'Times New Roman', serif;
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
}

h1, h2, h3 { font-family: var(--font-baca); font-weight: 600; line-height: 1.25; margin: 0 0 0.5rem; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1rem; }
a { color: var(--accent-strong); }
ul { margin: 0 0 1rem; padding-left: 1.25rem; }

:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
main:focus { outline: none; }