/*!
 * BASE — reset, tipografi global, dan perilaku fokus/aksesibilitas.
 * Membutuhkan tokens.css sudah di-include sebelum file ini.
 */

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  font-family: var(--font-family-base);
  color: var(--text-900);
  background: var(--color-bg);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--brand-bold); text-decoration:none; }
a:hover{ text-decoration: underline; }

*:focus-visible{
  outline: 2px solid var(--brand-bold);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* ============ UTILITY TIPOGRAFI ============ */
/* Kelas siap pakai untuk aplikasi baru — tidak perlu menulis ulang
   ukuran font manual di setiap proyek. */
.ds-h1{ font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); margin:0; letter-spacing:-0.01em; }
.ds-h2{ font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); margin:0; }
.ds-h3{ font-size: var(--font-size-h3); font-weight: var(--font-weight-semibold); margin:0; }
.ds-h4{ font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); margin:0; }
.ds-body{ font-size: var(--font-size-body); color: var(--text-900); }
.ds-small{ font-size: var(--font-size-small); color: var(--text-500); }
.ds-text-subtle{ color: var(--text-subtle); }