/* ==========================================================================
   typography.css
   Kelas tipografi utilitas — sesuai skala di DESIGN_SYSTEM.md.
   ========================================================================== */

.text-2xs { font-size: var(--text-2xs); }
.text-xs  { font-size: var(--text-xs); }
.text-sm  { font-size: var(--text-sm); }
.text-base{ font-size: var(--text-base); }
.text-md  { font-size: var(--text-md); }
.text-lg  { font-size: var(--text-lg); }
.text-xl  { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-6xl { font-size: var(--text-6xl); }

.weight-regular  { font-weight: var(--weight-regular); }
.weight-medium   { font-weight: var(--weight-medium); }
.weight-semibold { font-weight: var(--weight-semibold); }
.weight-bold     { font-weight: var(--weight-bold); }

.text-secondary { color: var(--color-text-secondary); }

/* Judul catatan — title area */
.note-title-field {
  font-family: var(--font-document);
  font-size: var(--text-6xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.note-title-field.is-placeholder {
  color: var(--color-text-secondary);
  font-weight: var(--weight-regular);
}

/* Isi catatan — body writing, fokus kenyamanan baca */
.note-body-field {
  font-family: var(--font-document);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-primary);
}

.note-body-field.is-placeholder {
  color: var(--color-text-secondary);
}

/* Judul section (Pinned, Recent Notes, Semua Notes) */
.section-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}